I'm trying to insert a gif as the background image but when I make the page fullscreen it zooms in making the background image appear a lot bigger. Is it possible to make the gif stay a certain size when changing the resolution of the page?
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("space.gif");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You could change the background cover property to contain value or other specific size.
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("https://flevix.com/wp-content/uploads/2019/07/Clock-Loading.gif");
background-size: contain;
background-position: center;
background-attachment: fixed;
background-repeat:no-repeat
}
<div class="bg"></div>
Related
I have a problem on Safari when scrolling on a parallax image.
The site works fine on Chrome and Firefox.
I did try to reduce the image size but that did not work.
My css:
background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 64px;
background-attachment: fixed;
the page link is:
https://www.amramedical.com/clinical-trials
Any suggestion will be appreciated.
This is probably due to the background-attachment: fixed; style, which causes a repaint whenever the user scrolls.
One solution is to move the element containing the fixed background image to its own pseudo-element, and use the will-change: transform property. Something along these lines:
.left-right-boxes-clinical {
padding-bottom: 64px;
overflow: hidden;
position: relative;
}
.left-right-boxes-clinical::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: fixed;
background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
/* This is the important part */
will-change: transform;
}
I am attempting to use 100vh to make a background-image always have a height per the size of the screen. What I am wanting to do is use the same image for each viewport and allow the overflow: hidden to make due of the access width. In essence, narrowing the image more vertically. However, my attempt is not working. The background-image is not adjusting to the 100vh.
Does anyone see what I am doing wrong?
#home-cover1 {
background-image: url("/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
width: 100%;
position: relative;
}
#home-cover1-wrap {
background-color: rgba(0,0,0,0.3);
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
<div id="home-cover1">
<div id="home-cover1-wrap">
</div>
</div>
Change CSS I think background-size: cover; is Best
#home-cover1 {
background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
position: relative;
}
Your #home-cover1 background-size lack the 100% of height, change background-size: 100%; to background-size: 100% 100%;
I am trying to make an image responsive, but when I test it with different screen sizes, it cuts off part of the image.My CSS is pretty straight forward as below. Here is my codepen
.mainImage {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}
What am I missing or could be doing wrong?
You're setting all the "background-" parts first, and then defining "background" in a shorthand, which is overwriting. Change the order...
.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}
Or don't use the shorthand...
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
You could also use background-size: contain instead of cover to force the image to display fully.
cover will completely fill the whole background.
contain will make sure the whole image is displayed inside the element
You also need to apply these background styling properties after the main background style.
So:
.mainImage {
position: relative;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
}
try adding this:
background-size: 100% 100%;
I am trying to find a way to put a nav bar behind some background images that repeat. Here it is:
Basically, I want to have a navigation bar behind the repeating plants image, but in front of the sun image. I am going to make the nav elements popup when they are hovered over. Here is my css for the header:
header {
height: 250px;
width: 100%;
background-image: url("top.png"), url("banner.png");
background-repeat: repeat-x, no-repeat;
background-size: auto 40px, cover;
background-position: bottom;
}
I would recommend z-index. From W3Schools:
"The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order."
The larger the z-index of an element, the closer to the front the element is.
Part of the solution was to use z-index as Howzieky mentioned but did not provide an example for. Here is how I did it:
css:
header {
height: 250px;
width: 100%;
position: relative;
}
#background-far {
height: 250px;
width: 100%;
background-image: url("banner.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#header-body {
height: 250px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#background-close {
height: 250px;
width: 100%;
background-image: url("top.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: bottom;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
html:
<header>
<div id="background-far"></div>
<div id="header-body">
<img src="logo.png"/>
</div>
<div id="background-close"></div>
</header>
I also needed split the header into 3 sections (background-far, header-body and background-close). Header body will store everything I will have in the header such as my nav bar. The important part was to make the header use position: relative and each section to use position: absolute; top: 0; left: 0;
Thanks for all your help everyone!
I have a fixed menu, after it I have a div which have fixed background-image. Problem is that menu overlap second image (so 100 px of image located under menu).
Example Link: http://codepen.io/gorez16rus/pen/GZjgNB
Image link: http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg
Menu:
.home-wrap header{
width: 100%;
height: 100px;
background-color: white;
position: fixed;
z-index: 10;
}
Div:
.event-box{
width: 100%;
height: 520px;
padding: 0;
background-image: url('http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
z-index: 3;
position: relative;
}
The easiest way to fix this, is to change the background-position of the image:
background-position: center 100px;
Modified version of your code on Codepen