I know I saw it somewhere, but can't for the life of me remember where. Simple question ( I hope)
• What is the optimal image size for a background image?
• What is the optimal image size for a background image?
I usually stick with width at 1920px and whatever height that gives to most landscape style images, as the most common resolution is 1920x1080, but I'm not sure if that's the optimal/recommended for RPR styles. 😅
Thanks for this. I’ve seen some of your styles and they look good.
Finding an actual preferred usable image with 1920x1080 dimensions isn’t easy. I have experimented with smaller dimensions with mixed results. They usually turn out vertically too big. Still working on getting a complete grasp of the CSS workings as it pertains to backgrounds.
Finding an actual preferred usable image with 1920x1080 dimensions isn’t easy. I have experimented with smaller dimensions with mixed results. They usually turn out vertically too big. Still working on getting a complete grasp of the CSS workings as it pertains to backgrounds.
With that, I usually make sure to have "background-size:cover" in my css for the body background, then use x,y positioning (center, top, right, left, bottom) to orientate it.
example:
example:
Code:
body {
background: url(imageurl) center center no-repeat fixed;
background-size: cover;
}
konnie wrote:
With that, I usually make sure to have "background-size:cover" in my css for the body background, then use x,y positioning (center, top, right, left, bottom) to orientate it.
example:
example:
Code:
body {
background: url(imageurl) center center no-repeat fixed;
background-size: cover;
}
Thanks for this. You replied about an hour after I posted in March but I must have lost the notification on my home page downstream and missed it.
Center center no-repeat fixed. I’ll play with that.
I’ve seen top center no-repeat fixed on some of the styles I’ve used which pins the top of the background jmage to the top of the screen.
Been working on more in-depth coding, and I know there is some code to have a mobile device recognise the background and shrink it down to fit. I’ve gone over the mobile coding that brings everything else in line with the format but I seem to be missing this.
The “background-size: cover” bit usually helps resize to fit, I’m not sure about mobile but I’ll also take a peek at my styles to see if it works for them.
Moderators: Sanne