I want to give my body a background that is fixed in the middle.
So that when I shrink my window it won't start cutting the right-side and keeping the left side static. I want it to cut left and right at the same time.
I want it to be like this example: www.everythingisnew.pt
In that website you can clearly see that the background gets "eaten" by the window at the same time from both sides.
What is the css behind it?
Specify background-position: center in your body element's CSS:
body {
background: url('your/background/src.png') no-repeat fixed center
}
This may solve your problem
background-image: url(src.jpg);
background-repeat: no-repeat;
background-position: fixed center;
background-size: cover;
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;
In a <section>, I have a background-image with a fixed position, like this:
section {
background: url("/images/bergen_background.png"), rgba(0,0,0,0.5);
background-blend-mode: color-dodge;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
What I want is to have it scroll when it has reached the end of the <section>, and I've been able to add the JS logic to add a CSS class, section.bottom, which will remove the fixed property for the background.
However, when I remove the fixed property and scroll down, the background-size: cover seem to break and the background-image seem to not fit the entire image in the viewport.
section.bottom {
/* what do I add here? */
}
What do I do to have a background-image not-scroll and then scroll while having the background-image be fixed with regard to the viewport?
First image is before scroll reached end of the element, second is after scroll has reached the end of the element
Reproduced here:
https://svelte.dev/repl/04b96435904e4625a3ddbcc28bd7054f?version=3.38.2
I think that I have fixed your problem but not sure.
I just thinking about idea which might solve the problem my idea like below :
First : remove background-size: cover; and add
background: url(<image>) center top no-repeat fixed;
background-size: auto <width size in %>; /*Beacause background-size: cover;
creates the scrolling issue.*/
Second : with the logic JS you can change background-attachment: fixed; into background-attachment: scroll;.
I think now everything is good.
I have a div, .cover-section, that I want to have a full background image that is the size of the viewport. I want to use the cover css property. I have got this working for the body of the page, but if I add more content and try to scroll, the image stays as the background. I want the image to scroll along with the content. This is what I have so far:
.cover-section {
background-image: url('../images/cover.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
How would I get it to do what I want?
Remove this linebackground-attachment: fixed;
I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
I am trying to figure out how to stretch a background image vertically. I am using CSS3 with 3 images in the following way:
background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top
Now I want to stretch these images vertically to that they extend all the way to the bottom. Is there a way to do this?
I'm late to the party here, but this is what worked for me:
background-size: auto 100%;
This will fit the image vertically and let the width do whatever it needs to do (i think it repeats by default). You can also set:
background-repeat: no-repeat;
for it to not repeat the image in the horizontal direction.
Try:
background-size: 100% 100%;
first 100% is for the width and the second for the height. In your case you need the second set to 100%
Thank you for bringing up this question. Below is what worked for me
background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;