I have an image called myImage.jpg. This is my CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
margin: 0px auto;
}
#header {
width: 640px;
background-color: red;
margin: 0px auto;
}
This made the height of myImage.jpg 100% of the screen and made the width 640px, but it did not center myImage.jpg. myImage.jpg is completely to the left.
How do I center myImage.jpg?
add a background-position: center 0%; to the body rules
Related
As you can see, I'm trying to make container which a background-image responsive when I minimize my browser's window.
I've tried playing with max-width ,percentages, background-size:cover and a few other tricks but they didn't work or they made my container disappear.
Pug
section
div(class='container')
SASS
section
height: 100vh
width: 100vw
background: gray
.container
position: absolute
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg')
background-repeat: no-repeat
background-position: center
background-size: cover
height: 807px
width: 948px
left: 50%
top: 50%
transform: translate(-50%,-50%)
CodePen
You can try something like this:
body {
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
display: flex; /*use flex to easily center*/
background: gray;
}
.container>div {
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg');
background-repeat: no-repeat;
background-position: center; /*keep it center within the centred div*/
background-size: contain; /*use contain to make the image shrink visually*/
width: 100%;
height: 100%;
margin: auto; /*center the div*/
max-width: 948px; /*Image width*/
max-height: 807px; /*Image height*/
}
<div class="container">
<div></div>
</div>
I have this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><head>
<link href="css/testphoto2.css" rel="stylesheet">
</head>
<body>
<img src="http://placekitten.com/g/200/300" alt="Smiley face" width="420" height="420">
<header class="section" >
</header>
</body>
</html>
and this css:
body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
height: auto;
width: auto\;
}
.section {
display: inline-block;
width: 100%;
height: 100%;
padding: 200px 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
I want to have the kitty scale properly as the browser is resized. In the first image, the kitty reaches its native maximum and stays there, regardless of further browser enlargement. The second kitty fills the browser width but only stretches horizontally once the browser exceeds its native width. I would like the kitty to scale in both dimensions as the browser window grows. If I remove the 'padding' property from the css, the kitty disappears.
Change in your CSS for "section" class as:
.section {
display: inline-block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
Height should have to provide.
make height:100% for HTML, body and section. Remove padding from section
html{
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background-color: #111;
}
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.section {
display: inline-block;
width: 100%;
height: 100%;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
check this out
https://jsfiddle.net/160cL4xo/
Set width & height of html & body to 100%. Remove Padding from section.
html,body{
height: 100%;
width: 100%;
}
Working Demo: Fiddler
Unfortunately, none of the solutions worked for getting the background image to scale properly. The kitty gets cropped in some way or another with scaling. The effect I want to achieve is provided by this css:
html, body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
width: inherit !important;
height: inherit !important;
}
but I do not know how to achieve it for a background image. Notice how the entire kitty fills the frame proportionately and is never cropped with resizing.
EDIT: This fixes the background image:
.section {
display: inline-table;
padding: 80% 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center ;
background-size: cover;
width: inherit !important;
height: inherit !important;
}
Don't ask me why 80% is needed. But the background kitty now fills the frame and scales just like the html kitty.
https://jsfiddle.net/ox2dy086/
Change in your CSS for "section" class as:
.section {
display: block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
I have a display problem in my web site content.
I am creating a website and it displays well on the browser (width 100%) But when I resize the browser screen and I made a transition to the right with the bottom scroll bar a white background appeared.
I'm not using the responsive technique.
I work with a fixed container width (width: 1170px; margin: 0 auto;)
the website: http://www.lemediterranee.com.tn/medet/
Add background-size: cover to main.
main{
background-size: cover;
}
I was able to clear the white background by adding extra style to the main custom element:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Also added prefixes for cross-browser support.
If you are not using responsive design, make your header with an fixed with
.top_header {
background-color: #222d68;
width: 1170px;
height: 45px;
}
Make your slider and main container with fixed width too
#slideshow {
float: left;
width: 1170px;
position: relative;
z-index: 8;
border-bottom: 3px solid rgb(194, 194, 194);
}
main {
background-image: url("../img/backgrounds/main_bg.jpg");
background-repeat: no-repeat;
height: 1075px;
float: left;
width: 1170px;
}
For the footer to
.bottom_footer {
width: 1170px;
height: 45px;
background-color: #222222;
float: left;
}
I am not able to figure out how can I decrease the height of cloud background according to the image so that even when on mobile, the hand is always touching the cloud background bottom edge.
HTML:
<div class="slidersection">
<div class="sp-photo">
<div class="sp-photo-content">
<a target="_blank" href="https://play.google.com/store/apps/developer?id=IDSstudio"><img style="border:0;" src="images/slider/slogan.png" alt="IDSstudio" class="centered"></a>
</div>
</div>
</div>
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
height: 500px;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
height: 100%;
overflow: hidden;
background-position: center;
}
img.centered {display:block; margin-left: auto; margin-right: auto;}
.slidersection {
display: block;
padding-top: 80px;
background: rgba(255, 255, 255, 0);
}
At a quick glance:
use a media query to remove the height:500px so that the .sp-photo-content div conforms to the height of the image.
#media screen and (max-width: 640px){
.sp-photo-content{height:auto;}
}
set the background size of the image to fit the width of the screen and position at the bottom
.sp-photo-content{
background-size: 100% auto;
background-position: center bottom;
}
This would be much easier with a jsfiddle to play with ;)
I believe you need to use JQuery (JavaScript) in this case, there are limitations in CSS.
try this link: How to resize an image to fit in the browser window?
I did this to solve the issue:
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
overflow: hidden;
background-position: center bottom;
}
Do you want the background image to be 100%? If that's the case, you could do this:
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-position: center;
background-size: 100%;
}
However, a better way to do this would be to use media queries in your css to separate some of the css for mobile and for desktop. I would also suggest uploading a smaller version of that image for mobile - it'll be a hefty size for the mobile browser to download.
The below code shows how you would write the media queries:
/*for the phone - assuming back-mobile.jpg is the clouds background with a size of 480px */
#media only screen and (max-width : 480px) {
.sp-photo-content {
background: url(../images/slider/back-mobile.jpg) no-repeat scroll 0 0;
}
}
/*for everything else */
#media only screen and (min-width : 481px) {
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
}
}
So I have a html structure like this
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
min-width: 900px;
min-height: 650px;
background: #dddbd9 url('../images/bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
#content {
clear: both;
height: 345px;
position: relative;
margin: 0 auto;
width: 790px;
padding: 20px;
overflow: hidden;
}
#bottomBar {
height: 100%;
margin: 0 auto;
width: 100%;
padding: 0px;
background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x;
}
<body>
<div id="container">
<div id="content"></div>
<div id="bottomBar"></div>
</div>
</body>
Why the #bottomBar height stretches all the way for more than few hundred pixels while the bg image is just around 115px?
UPDATE: I actually don't wanna the bottomBar to be just 115. I want it to occupy the whole remaining area of the bottom, but not stretching over more than the window. Thanks.
UPDATE2: So the #content is 345px, #container is 100%, there are actually some other divs in between content and bottomBar, how do I get the remaining height for the #bottomBar? I want to bottomBar to just occupy the remaining area.
Just set the div height explicitly, like height:115px, or write a server-side script to return the height of the image, if it is worth doing so. As mentioned by others, setting height (or width) to X% means X% of the container, and not of the background-image.
height: 100% means that the element will take 100% of the height of its container. So in this case, 100% of the height of the #container element.
It's not related to the background image.
Set height: 115px to make #bottomBar the same height as its background image:
#bottomBar { height: 115px; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }
Have tried changing the style to height: auto ?
#bottomBar { height: auto; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }