I have a parallax class which contains the image as well. I tried to make the image responsive by setting the image width to 100%, but its just not working.
.parallax1 {
/* The image used */
background-image: url('Images/FloralPurple.png');
/* Full height and width */
height: 100%;
width:100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and the following is the HTML code:-
<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>
I tried adding the image tag inside of my div, but still, nothing got changed.
Thank you
The size of your background image is defined by the background-size css property.
When set to cover the image will scale in order to fill the div. You can set the background size to the following values:
cover As described the div gets covered. The image gets scaled and cropped.
contain The image is always full completely visible and gets scaled in order to be completely visible.
100px 50px A fixed size. The image gets streched.
50% 100% A percentage. The image gets stretched.
Example:
background-size: 100%;
The image would always fill the div. But get stretched in order to do so.
Related
according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
I have an image that I'm trying to use for my initial parallax styled background that won't change orientation. It's the proper aspect ratio for a portrait, but no way I edit the code or the image itself it won't stop turning.
I've tried using translate code in my css, and I've tried the whole z-index and webkit lines and I eventually learned that those wouldn't work anyways. I don't know what else to try.
.parallax1 {
/* The image used */
background-image: url("me.jpg");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The expected outcome is supposed to be landscape oriented version of a portrait of me. The aspect ratio is correct for this type of image but the photo still stretches and turns portrait.
You might want to create a JSFiddle to demonstrate this, but it's most likely your background-size: cover; value for background property ensures that the image will fill your whole container while preserving the aspect ratio. Because you only defined a height on your container your width is naturally "100%" (because divs are block elements). If your viewport or the container's parent ends up more wide than narrow so will your background image:
https://jsfiddle.net/w4x3bq61/
One way you can tackle this is to set the width of .parallax1 as well so it always have a taller height vs width such as:
.parallax1 {
/* The image used */
background-image: url("");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
}
So I came across this today.
I have a section that is longer than the viewport, which has a background image with background-attachment: fixed;. This background is also using the background-size: cover; property. (needed for responsive purposes)
With the fixed position applied to the background, it crops off the image to fit it within the current viewport height and overflows the top of the tag.
Is there a way to make the image sit in the correct place (i.e. same position as if it wasn't fixed) and maintain the cover propery.
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
background-size: cover;
background-position: 50% 50%;
/* set the height of the hero. */
height: 125vh;
}
.fixed {
background-attachment: fixed;
}
<h4>With the fixed position</h4>
<section class="hero fixed"></section>
<h4>Without the fixed position</h4>
<section class="hero"></section>
I'm guessing as fixed elements are fixed to the viewport, the answer is no, but wasn't sure as it's a background image.
I wondered if perhaps anyone has found a workaround?
The Problem is, that the background area is fixed to 100% view port if you use fixed - You can enlarge the background area by adding background-size:
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
/*background-size: cover;*/
background-position: 50% 50%;
/* set the height of the hero. */
background-size: 125vh;
height: 125vh;
}
I have an MVC app with an image in the footer. My CSS currently looks as follows:
footer {
position:absolute;
bottom:-150px; /* This puts the footer 100px below the bottom of the page*/
width:70%;
height: 170px; /* Height of the footer */
background-image: url("/Images/Footer/Footer3.png");
background-repeat: no-repeat;
background-position: center;
}
The problem I have is that the image is not being resized correctly to fit within the width and height of the container. Parts of the image are cut off. And when I resize the browser viewport (shrink it), more of the image is cut off. The image size is 1000x175 if that helps. I would like the image to be responsive and be auto resized correctly within the container.
did you try
background-size: 100% 100%;
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/