Highlighted

How do i properly insert a background image?

Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

I've found the only way i can insert a background image in a div is if i include a bit of text (like the h iv'e used here), then sometimes later on i'll delete the text and the background image will stay, but other times the image will disappear too, what is going on? How do i do this properly? Also why hasn't the image centered as well as the letter???? Screen Shot 2020-03-14 at 13.07.28.pngScreen Shot 2020-03-14 at 13.07.38.pngScreen Shot 2020-03-14 at 13.07.19.png

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do i properly insert a background image?

Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

I've found the only way i can insert a background image in a div is if i include a bit of text (like the h iv'e used here), then sometimes later on i'll delete the text and the background image will stay, but other times the image will disappear too, what is going on? How do i do this properly? Also why hasn't the image centered as well as the letter???? Screen Shot 2020-03-14 at 13.07.28.pngScreen Shot 2020-03-14 at 13.07.38.pngScreen Shot 2020-03-14 at 13.07.19.png

Views

243

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 14, 2020 0
LEGEND ,
Mar 14, 2020

Copy link to clipboard

Copied

To keep a <div> open you need to have content inside it or set a height or use top and bottom padding to prop it open.

 

Usually when you are including a background image in a container it is so you can overlay content on top of it.

 

If you have no content inside a <div> and haven't set a height or any padding it will just close down on itself.

 

The flex justify-content css attribute has no effect on background images, you need to use background-position:

 

background-position: center, center;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2020 1
Adobe Community Professional ,
Mar 14, 2020

Copy link to clipboard

Copied

Remember rule #1 in web design.  HTML = content,  CSS = styles.  Logos are content, not styles.  Never put logos in the background.  Always put them in the foreground (HTML) so you can link them to your index page and add ALT attributes for better web accessibility.  

 

CSS background elements are for incidental graphics, gradients or solid colors.  

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2020 0
LEGEND ,
Mar 14, 2020

Copy link to clipboard

Copied

Normally l would say thats sound advice but this logo appears to be just an image of a cake, the name/text of the company looks to be seperate from the image in the html, so links can be applied to that and search engines have someting to eat, excuse the pun.

 

On the other hand l dont see any reason in this instance why a small image of a cake needs to be a background image........weird stuff happens.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2020 0
Adobe Community Professional ,
Mar 14, 2020

Copy link to clipboard

Copied

Assuming that cake icon is the brand/logo, the challenge is correctly aligning other elements over the background so they don't overlap the icon.  And this must work on ALL devices.   I see no reason to make this harder than it should be.  An ordinary HTML image is much simpler to work with.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2020 1
osgood_ LATEST
LEGEND ,
Mar 15, 2020

Copy link to clipboard

Copied

I absolutely agree, which is why I said......'weird stuff happens'......without meaning to offend anyone - if you don't have a good working knowledge of building websites, then those that do, should expect to see the unexpected........'weird stuff'

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2020 0