I would Like to make my Background Image Responsive
.page {
background-image: url("AA/NW.png");
background-repeat: no-repeat;
height: 650px;
width: 1228px;
position: relative;
}
Would this solve it
.page {
background-image: url("AA/NW.png");
background-repeat: no-repeat;
height: auto;
width: 100%;
position: relative;
}
You can use background-size property. The first value sets the width and the second value sets the height.
If you want it to be full-screen you can use it like this:
background-size: 100vw 100vh;
Related
my problem :
I have the class .logo working perfecly with this size: width: 316px; height: 300px;
the problem is this logo never will have this size always, the width and height should not be defined, so next logo can fits well.
I tried remove the width and height without no success, when I do this the logo does not appear.
it is something I can do in the css to make this work without set width and height?
https://jsfiddle.net/pLfgam3r/1/
.logo {
background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
<div class="logo"></div>
<div class="logo2"></div>
Set background-size: contain;
https://jsfiddle.net/wuqvwpkL/1/
I found this post:
Why doesn't the background image show up without specific width and height?
So your css should look like this:
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
no-repeat: true;
display: block;
position: relative;
width: 316px;
height: 300px;
padding-bottom: 20%;
background-size: 100%;
background-repeat: no-repeat
}
This is working for both logos that has different sizes.
https://jsfiddle.net/pLfgam3r/4/
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 have situation. I'm using header full-width image, so width is 100% and height I have fixed to 650px.
I need to position image in the way, that in case I will increase or decrease browser width, background image will only increase or decrease width, and not move image vertically.
I hope I've wroted it understandable. If not enought, here is a screenshot
Current situation
My desired situation
SCSS code
header {
margin-top: 78px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
max-width: calc(100% - 120px);
}
.header-main {
background-image:url(../img/header.jpg);
height: 650px;
margin-left: 60px;
margin-right: 60px;
}
HTML
<header class="header-main" >
---Content---
</header>
Thank you soo much :)
try to change the background-size
header {
margin-top: 78px;
background-repeat: no-repeat;
background-position: center;
background-size: auto 650px;
position: relative;
max-width: calc(100% - 120px);
}
.header-main {
background-image:url(../img/header.jpg);
height: 650px;
margin-left: 60px;
margin-right: 60px;
}
I'm trying to make an image change when a user hovers over it, but the method I used seems to cut off the image, not showing all of it. How can I have it scale the image to the size I specify, rather than just making the div that size and cutting off the rest?
HTML:
<div class="navbar-image" id="navbar-image-ID2Games">
</div>
CSS:
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
See here: https://jsfiddle.net/7a7ghfw4/
As you can see from the imgur url, the image is supposed to be a save icon, but it cuts off everything but the top left.
Add "background-size: contain" to both of your css rules.
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
background-size: contain;
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
background-size: contain;
}
This works:
#navbar-image-ID2Games {
width: 265px;
height: 265px;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 265px;
height: 265px;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
I only changed the width and height for both classes