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;
}
Related
I am trying to incorporate a logo into a HTML page, but I cannot seem to get its height to auto resize to a max-height of 140px. When I do, the logo gets chopped off. See this for this example:
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
<div class="partner-logo">
</div>
How can I make sure that this logo can have 100% width but only a max height of 140px?
Please try applying background-size: contain property to your css. background-size: contain scales the image as large as possible without cropping or stretching the image.
For more about background-size property see mdn
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="partner-logo">
</div>
This css code makes sure your background is always centered and always fit the size you give your div without it getting "chopped off":
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-position: center;
background-size: contain;
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
Try this, and you can resize the image. Just increase or decrease the padding value.
thanks and hope this help you.
.partner-logo {
z-index: 1;
padding: 20px;
margin-top: 20%;
max-height: 140px;
border: 1px solid #000;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
}
<div class="partner-logo"></div>
I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top.
.bgimage {
width: 1903px;
height: 1000px;
background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
background-attachment: fixed;
background-size: cover;
margin-top: 60px;
display: block;
}
.bgimage .ETLOGO {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 40%;
height: 50%
}
<div class="bgimage">
<img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
</div>
Here is a photo of my website.
I think what you wanted was padding at the top of the logo, instead of margin. Try this:
.bgimage {
background-attachment: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
background-position: center;
background-size: cover;
height: calc(100vh - 50px);
width: 100vw;
}
.bgimage .ETLOGO {
display: block;
height: 50%;
margin: 0 auto;
padding-top: 40px;
}
<div class="bgimage">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
</div>
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 have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}
I have an image background set in in wrapperlp at top of page. It works fine but its width is set at 1000px. I need this image to span across the full width of the screen, but when i change width nothing happens.
css
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-35px;
padding-top: 5px;
max-width: 100%;
}
#video_play {
position: relative;
display: inline-block;
float: right;
margin-top:-30%;
width:280px;
padding-right:10px;
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
.reward_img {
padding-left: 45px;
padding-top: 5px;
position: relative;
display: inline-block;
float: left;
}
html
<div id="wrapperlp">
<div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">text</div>
<div id="para">text</div>
<div id="game_img"><</a></div>
</div>
</div>
<div id="video_play">text</div>
<div>
<div id="spacer">
<div style="position: relative; float: left">text</div>
</div>
Besides other answers here, you can also use values cover or contain in background-size:
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
background-size: cover;
contain
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.
background-size: contain;
source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you consider putting img inside of the div. This should do it.
<div style="width:200px; height:200px">
<IMG SRC="URL.PNG" width="100%" height="100%"/>
</div>
To do this as a background image of the div, use
height: 200px;
width:200px;
background-image: URL(image.PNG)
background-size: contain;
In your CSS.
background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
Hope its help you
If you need to get the content(image) to the full width of screen,you must set width in percentage;that is 100% of screen
width:100%;
always give max-width in px and width in percentage when using max width