This question already has answers here:
css scaled background image
(4 answers)
Closed 2 years ago.
The website I'm working on, Tamsnails.com, is just about done, but it has one issue that I've been bothered with for a while now. The background image of the store will simply not stretch to the full screen of my high resolution work laptop. I've tried a lot of things over the last couple of months, a lot of which I forget, but
I remember at first, I had it as an actual css background-img
then, I had
<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>
with mainbackground style
#mainBackgrond {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
Now, I have
<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">
with style
#mainBackgrond {
height: 50em;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
because this at least looks good on my home laptop.
Yes, I know I spelled 'mainBackgrond' wrong.. bear with me here!
If the issue is that the image doesn't stretch to the bottom of the window (which is what I'm seeing in Chrome) then change the height: 50em on your #mainBackgrond style to:
height: 100%;
You might want to take a look at this ( or other similar jquery plugins )
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Quite simple to use and it stretches the background image fully without risking the aspect ratio.
Try to remove the height property, this way it will maintain the aspect ratio and stretch all the way across the screen, if this is the intent.
#mainBackgrond {
position: fixed;
z-index: -1;
width: 100%;
left: 0px;
top: 0px;
background: url(/background_image.JPG) no-repeat center center fixed;
}
The background image itself is huge, and makes initial load time very slow, you should consider compressing it more or resizing.
also have a look at css media query a nice way to show different size background images for visitors with smaller screens that might not even have the resolution to see the background.
#media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Related
I'm currently working on my blog where I am trying to fit all Images into a 1:1 Ratio, which works great for images where the height is larger than the width. Well on the other hand it also works "well" with images where the width is bigger. But the main problem I have is that the images with a bigger width don't need to be fit in into the 1:1 ratio as this would align the description below better.
How can I fix this? (Please find my code below):
CSS:
.img-container {
background: transparent;
position: relative;
width: 100%;
}
.img-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
.img-container img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
cursor: pointer;
}
HTML:
<div class="img-container">
<img src="xxx"/>
</div>
Thank you in advance!
I'm not sure what you're asking. Additionally, none of those pictures have a 1:1 aspect ratio, that would mean they were perfectly square.
If you want to apply different css based on whether the image is landscape or portrait, then I think you're going to need to implement some javascript to detect the measurements and then apply the css class you wish to be applied.
Otherwise, my initial thought is, why don't you just apply a max-width? Portrait images will take up as much horizontal space as they need up to the max, while landscape images will take up to the max without distorting the current aspect ratio.
object-fit: cover; will adjust the size of the image.
I have a full page height and width background image to a page that is designed to cover the who back of the viewport that also adapts to the size of the viewport. This work brilliantly on desktop - however on mobile (both iPhone and Android) when the address bar and navigation bars are hidden (default browser behavior) as you scroll down the background image jumps (as seen below):
https://ibb.co/7jWLqWh
The code I'm using for this is:
HTML:
<div id="bg">
<img src="../../assets/landing-page/bg.png" alt="">
</div>
CSS:
#bg {
position: fixed;
top: -32%;
left: -90%;
width: 200%;
height: 200%;
background-color: #FFFFFF;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
opacity: 0.75;
}
As % values are being used, when there is suddenly more space because a browser bar has disappeared, the size suddenly jumps.
To get round this problem the suppliers decided to fix the vh height unit. While this can cause other problems, like full height 100vh divs having the bottom cut off when a website is entered, it was designed to help mitigate the sort of scrolling-jump problem seen here.
Suggestion is that you try defining the heights in vh units rather than %s to see if that fixes things.
I'm trying to create a section layout where I just want only half of my image to be shown in the bottom, right-hand corner of the section. I can adjust the position and size of the background, but when I start resizing the window, the image either disappears, or moves from where I actually wanted it to be. I basically just want the layout to be responsive. I can't use px values for the background position, because when I adjust the window even slightly, the background photo looks terribly misplaced.
My code (you need to fullscreen the code snippet to see what I kind of want it to look like):
html, body {
height: 100vh;
width: 100vw;
margin: 0;
}
.one {
background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
height: 100vh;
}
.two {
background: #f3f3f3
}
<section class="one">
<header>First Section</header>
</section>
<section class="two">
<header>Second Section</header>
</section>
Any help would be appreciated. Or if this isn't possible. I also tried using Transform, which didn't work out well either.
Codepen
Try with position: fixed; and play with top: and left: values.
Edit: With responsive positions in any elelment use % in size ;)
Eg.
.one {
position: fixed;
top: 50%;
left: 50%;
background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
height: 100vh;
}
Hope this can help you ;)
I am trying to use the technique described as technique #2 at the following URL:
http://css-tricks.com/perfect-full-page-background-image/
to set a web page background image that shrinks in size when the window is resized.
My HTML is as following
<div class="bg">
<img src="images/bg.jpg" alt="">
</div>
And my style definition is as following.
.bg {
z-index: -1;
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
This works perfectly when the image is smaller than the screen and it needs to be sized up.
But in case of shrinking a big image, it doesn't work and I just get a huge image centred on my screen.
I need my image to be able to shrink, cover the entire background, preserve aspect ration.
I cannot use body bg or whatsoever because I need to be able to change the image in a slideshow.
EDIT:
I HAVE to have the HTML structure as <div><img/></div>
EDIT 2:
The reason I cannot change the structure (or at least that's what I think) is that I am using script at:
http://malsup.github.com/jquery.cycle.all.js
to cycle several images, and that script doesn't allow me to change anything of the way the HTML is structured. If anyone knows how to use it with background images or suggest a totally different script that would be much appreciated.
If you have to use <img> tags to produce the image, simply delete the height declaration from your CSS; the image should maintain aspect ratio and resize appropriately if you just have width specified. (Alternatively you could specify height and delete width as well, but specifying width is the industry norm.
For a CSS background method, try this, instead:
.bg {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-clip: border-box;
background-origin: padding-box;
-moz-background-size: cover;
background-size: cover;
}
It requires CSS3, but will work in somewhat-old browsers (-moz-background-size is for FF3.6; FF4+ uses the default background-size). This method uses the CSS background-image property which is preferred to your method.
The reason for this is that the background image is not part of the meaningful content of your site page, but rather part of the styling (it's a background image, so it belongs in the background). Therefore, it should be handled using Cascading Style Sheets.
Remove all the styles from your .bg div and apply the following styles to your img tag.
.bg img {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
}
P.S. Since you are going to use this as a slideshow, I would suggest you to change the class .bg to .slideshow so that it's semantically meaningful.
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}