Because of the height/design of this company's logo we created an header image that includes it. That header image is located here:
http://tinyurl.com/oqkpvff
Anyone know how to make that header image resize automatically for mobile/smaller tablet?
#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}
I did try height: auto but that didn't work either.
You can use the background-size: contain;
Demo
#title-container {
background-image: url("http://tinyurl.com/oqkpvff");
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
background-size: contain;
}
contain
This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
Related
I have the following background using background-size: cover and I'd like to offset it a bit to the left.
.landing {
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
width: 100vw;
background-image: url('~assets/img/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
If I use cover, I can't offset my image so I tried doing
.landing {
background-size: 110%;
background-position: right 10% center;
}
But I end up with white space on top and bottom of my image because it doesn't expand to respect image's aspect ratio (the height is set to auto).
Without using cover, how can I set the right background-size percentage to avoid whitespaces on top/bottom of the image on any screen size and keeping aspect ratio?
To get the background shifted slightly to the left but still completely filling you could put it on a before pseudo element, then you have a lot of control over dimensions and positioning without affecting the main element.
Here's an example where we want to move the background so the person is 30px to the left. The pseudo element is given a width + 30px but translated 30px to the left.
.landing, .landing:before {
position: relative;
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
overflow: hidden;
}
.landing {
position: relative;
display: flex;
width: 100vw;
}
.landing:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100vw + 30px);
transform: translate(-30px);
background-image: url('https://picsum.photos/id/1049/1024/768');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}
<div class="landing"></div>
Note: a bit more sophisticated arithmetic is needed to do it in terms of % (given the % width of the pseudo element is more than the original)!
I'm not a coder but have some basic knowledge and have been editing a template. The site is almost there - on desktop it looks fine but on mobile the cover image doesn't scale down.
I've tried changing the size from 100%, auto and cover, played with vw and vh etc, but still can't get anything to work.
Here's the CSS:
.intro {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: auto;
-o-background-size: auto;
}
If anyone can help that would be great! the site is adammillsmusic.com
Thanks!
For Responsive Images do the following in .intro class
intro {
max-width: 100%;
height: auto;
display:block;
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
background-size: contain;
-webkit-background-size: contain
}
Key changes
max-width: 100%;
height: auto;
display:block;
Hope this helps
You are prefixing properties different values :
-webkit-background-size: cover; : On webkit (Chrome & co), cover the background
background-size: auto; On other browsers, do not cover
This is probably why you see a covered background on your desktop and having unexpected results on a mobile browser.
body {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(//placecage.com/200/200) no-repeat center top;
background-color: #e5e5e5;
background-size: cover;
}
Set your max-width to 100% like this:
max-width: 100%;
Thanks for your help - this did solve the problem. Though now after seeing the result, I think maybe it would be wiser to call a smaller size image through the use of '#media' for the mobile site. The only problem is in my code editor when I try to do this it doesn't seem to recognise the '#media' tag and treats it like /* */
Any thoughts?! Thanks
#media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
I have a web page which I'd like to set full screen image right when users enter the page. I don't want it to be fixed or anything. Just at the size of the window.
Now, I also have a footer which is positioned absolutely at the bottom of the web page. Here is the styles for the footer:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding-bottom: 80px;
color: white;
background: white;
font-family: "Quicksand";
fill: currentColor;
}
/* Footer Section */
footer {
display: flex;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
align-items: center;
justify-content: center;
background-color: $accent-color;
color: #fff;
}
Now, when I try to set my full screen image like this:
.fullscreen-bg {
height: 100%;
background-image: url("/assets/images/scorpion.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The image doesn't show at all, but when I change min-height: 100% to height: 100%, The image suddenly shows up, but the footer now is at the bottom of the viewport, not the page. Here is an image that will explain this perfectly:
https://i.gyazo.com/d47e2e1fcdeaf4f8f8cab8b847c00f43.png
As you can see, the footer now jumps up and resides at the bottom of the screen.
If I change this attribute back to min-height: 100%, the image doesn't show at all:
https://i.gyazo.com/b3d8b941222ac16455d220f25da8bfbf.png
How can I fix this? I want the image to be full screen but also I don't want the footer to jump up from the bottom of the page. How can I combine these 2 behaviors?
Use height: 100vh; it will cover 100% height for all screen sizes.
I'm building a website and the image I want to put in the as background I can't put it into the position I want.
I want the 'focus' of the image on the web page to be a few px up to the centre of the image. The width I can see it all, but the height no.
The image resolution is '5760x3840px'.
So, I have this piece of css code for the image's settings.
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom 1000px;
margin-bottom: 20px;
padding: 50px 0;
}
Try this
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
**background-position: center 10px;**
margin-bottom: 20px;
padding: 50px 0;
}
I am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?
It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>
If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;