Jump to content

Background image


vidmarc

Recommended Posts

I've been asked to add a full size background image to all pages. Is this something that will slow down page loading etc? Or can it be done with css to minimise any slowing down? Once loaded, will it then be cached? Any tips greatly appreciated.

Link to comment
Share on other sites

If the browser has to go and fetch it, then there will be that one time expense. As long as the browser has it in its internal cache, it should come from the cache from then on.

Tip: if the background image can be tiled, do that.

Link to comment
Share on other sites

If the rule is in a CSS file, then the URL must be an absolute path or a relative offset directory.

absolute path: /images/logos/MondoBG-250.jpg
relative offset: ../../../images/logos/MondoBG-250.jpg

Alternatively, you can put the image in Foundation's images/default/ folder. (Other skin's folder structure may be different.)
relative offset: ../images/default/MondoBG-250.jpg

 

Link to comment
Share on other sites

When trying to view the image here, it isn't displaying: images/logos/MondoBG-250.jpg

However, I can view it here: images/source/logos/MondoBG-250.jpg

Does Cubecart take some time to convert between the source folder and the final image location?

Link to comment
Share on other sites

I've tried this:

body { background-image: url("../../../images/source/logos/MondoBG250.jpg"); background-repeat: no-repeat; background-size: 100% 100%; }

But it's not filling the browser top to bottom. Any suggestions?

Link to comment
Share on other sites

Please study this page:
https://www.w3schools.com/css/css3_backgrounds.asp

The background-size using measured amounts will affect the size of the image. But what you want is to have the image sized to fit its container. That keyword is probably "cover".

(What is not covered is what the browser does when the size of the background image's container changes.

Link to comment
Share on other sites

  • 4 weeks later...

Hi, try this. But before you need image res 1400px x 1240 for cover all device.

body {
    background-image: url(path your image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

Whit this code, the image are be fixed.

🙂

Enjoy

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...