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;
}
Related
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;
I put background-image on my site but the result image is stretched.
How I can avoid it?
CSS:
background: rgb(236, 242, 196) url(../images/border.png) no-repeat;
background-size: 100% 100%;
margin-left: auto;
background: rgb(236, 242, 196);
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 75px;
How I can avoid stretched image width and height and make it auto width and height.
If I understood correctly your problem, you should use:
background-size: cover;
Finally got my main parallax image to scale on mobile with background-size: 100% auto, but now there's a large empty space after the image where the div isn't scaling down to mobile size. Please help! Here's the site.
css
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 100%;
width: 100%;
}
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center
}
background-attachment: fixed; does not tend to be supported by mobile browsers. In my experience it tends to cause some undesirable behaviour.
This might help: Background-attachment: fixed not working on android/mobile
In addition: I think the p tag is causing your problem. Inspecting the elements shows that the P tag is taking about 20-30px height. but has no content in it.
Is min-height more appropriate?
Or for that matter, is it even appropriate for me to be setting all of my fullscreen backgrounds to both html and body? Can this be set to html alone?
html, body {
height: 100%;
background-image: url(blah.jpg);
background-size: cover;
background-position: center center;
}
everything is drawn on body, html is the main document, if you can give styles but is not highly recommended because body and html in question are the same.
min-height is used whenever a screen this size that does not want.
*{
margin: 0;
padding: 0;
}
body {
background-image: url(blah.jpg);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
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.