best image size for my site background WordPress
- SOLVED
Hi,
I need help to figure out the best image size for the slideshow running in the background.
It needs to be compatible with PC and laptop.
right now the image is cut.
The site texts are localized.
www.saltaa.com
Thanks,
Sharon
Answers (3)
Jatin Soni answers:
use this to your image container class o id in your stylesheet file
background-size: cover;
this will fits your images according to the screen size. Make sure your container should have fluid width and should fits with the device width. For that you can use
width:100%
If you are loading images with <img> tag than you can use below code
width:100%;
height:100%;
but in both case either with background-size or image with the container should have fluid with and height to fits with the device screen. If you are assigning directly to the body throng css than first will works fine.
cloudnclear comments:
Thanks for answering.
I didn't get where exactly to insert this line?
background-size: cover;
Sharon
Jatin Soni comments:
Actually I checked your site but the javascreept doesn't allow to properly diagnose but as what I see I believe that you are using <img> tag to call image and width and height may be defining through javascript or something dynamically.
So probably background-size:cover won't work in this case but you may need to modify the code where its defining the width and height. or try to override inline styling with below code (add in style.css)
div.quality img[style] {
width:100%;
height:100%;
}
You need to try I am not sure it will work or not. Or you may need to modify slider code itself.
Ross Wilson answers:
I would make an image type with the maximum width of 1600px and make sure the images are in jpg format. Add something like this to your functions.php
add_image_size( 'background', 1600, 9999 );
Then when you get your image to be displayed in the background make sure you request the 'background' size.
Daniel Yoen answers:
try this tutorial :
http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
hope this help. :)