I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle
Related
I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
I want to give background size as 636px and 1140px to background image instead of div. as I don't want the scroll of div because of its height.
If I give height and width to the parent div then I get background-image but when i give to background-size then it doesn't work.
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size:636px 1140px;;
width: 100%;
height: 100%;
padding: 10px;
}
<div class="custom_app_phone_div">
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Any help would be great.
Thank you.
If not defined the div's height will be determined by the content's height.
What you could do is set the min-heigh property.
I'm not sure what you are asking for. But if you want to change the background image size without changing the div size you should either use an image <img/> or use a helper div as background (see example below).
Now, if you want to get rid of the scrolling bar you can set the parent container .custom_app_phone_div a height/width and set overflow: hidden.
Can you try this and let us know if this works for you?
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .bgHelper{
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size: contain;
height: 1140px;
width: 636px;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
}
<div class="custom_app_phone_div">
<div class="bgHelper"></div>
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Set the size of background images to 636px x 1140px using any image editor and then use:
background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;
Working fiddle here
I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
I'm trying to place a clickable image in the center using padding.
The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.
If I remove padding it works but then the image isn't were I want.
Is there a way to fix this?
My HTML:
<body>
<div class="page">
<div class="body">
<div id="clicktoenter">
<h1></h1>
</div>
</div>
</div>
</body>
My CSS:
.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}
.home{
margin-bottom: 10px;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
padding:200px 200px;
}
.home:hover{
background:url(../images/imageclick.png) center center no-repeat;
padding:200px 200px;
}
Change your margin to this and it will center, not using padding.
.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
You have fixed width of block element, so you can to use auto left/right margins to center this block:
.home{
margin:200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
If you really want the clickable image to be in the middle of your screen, then forget the padding and just center the h1 the image is in.
#clicktoenter h1 {text-align:center}