I'm having problems centering the background image within a certain div. I'm using the following code for CSS:
.background3 {
max-width: 90%;
height: 400px;
margin: 0 auto;
background: linear-gradient( rgba(86, 71, 71, 0.56), rgba(86, 71, 71, 0.56)), url(img/kitpage.jpg) no-repeat 50% 50%;
}
I've tinkered and tried, but to no avail. I'm pretty sure it's an easy answer, and thank you all in advance for your help and advice.
A screenshot of the problem is attached below
Use the following in your CSS:
display: block;
You have to use background position property e.g:
.background3 {
max-width: 90%;
height: 400px;
margin: 0 auto;
background-position:20% 20%; // Margin background from top and left
}
You can adjust margin as you need but it's not a good way. If you want more proper way then try this:
.background3 {
max-width: 90%;
height: 400px;
margin: 0 auto;
background-size:auto 100%;
background-position:center center;
}
Related
Hey there I am building a website! I'm trying to make the background-image to fit the whole div.section. I tried height: 100%; width: 100%; but it did not work. I need some help.
The part of the code which needs to have the background image:
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
}
My complete code on JSFiddle: https://jsfiddle.net/2Lqxqw10/ (Make sure to make the width of the result maximum) or another link: https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html
Thank You in Advance!
You can use absolute position with a proper z-index, it could also works :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
See it here
Width and height set the proportions of your div. To set the size of the background, you need the css property background-size:
.section {
background-position: 0 0; // start from top left
background-size: 100% 100%; // expand to 100% in both directions
}
You need to set a certain height to your section e.g :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 500px;
width: 100%;
}
fiddle
Currently .section is null or no data in it
put some data in it or give some specific height to the .section to view section
Add position absolute to the .section class.
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position absolute;
}
https://jsfiddle.net/2Lqxqw10/6/
I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}
I have a div which contains a background image coming from the css.As per my need i have to show this div after 77px; from the top.So i have added padding-top:77px; in my css but the background image is not coming below or after to 77px; instead it is coming from top only and getting repeated.If i am adding background-repeat: no-repeat; then it is leaving 77px; space down in the Div and again it is coming from top only..
Here is the HTML ..
<div class="header-wrapper">
//Header Div
</div>
<div id="headerbodyimage" class="headerbody-wrapper">
//Header body Div
</div>
And Here is the css..
.header-wrapper {
position:fixed;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;
width: 100%;
height: 77px;
}
.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001;
padding-top:77px;
width: 960px;
height: 242px;
margin: 0 auto;
}
Please help me ..THanks
Use background-position: 0 77px;
A different approach from other responses, as you're using fixed position for the header wrapper, you could set a padding top for the parent container (body, for example):
body {padding-top: 77px}
Leaving the headbody wrapper:
.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001;
width: 960px;
height: 242px;
margin: 0 auto;
}
I was about to set up a pastebin sample, but didn't have your real images.
Please check this fiddle
.header-wrapper {
position:fixed;
background: url("http://eshbeata.com/images/backgrounds/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;
width: 100%;
height: 77px;
}
.headerbody-wrapper {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
z-index: 60001;
padding-top:77px;
width: 960px;
height: 242px;
margin: 0 auto;
}
I have solved your issue .both the images are coming properly.Now youcan position it using background position property the way you want it.
my header background image changes size when I change the width of my browser, to the point that if the width gets small enough, my image will get pushed out. I have background-size: 120%; and I know that's what's causing it. Would there be a way to set the minimal size of the background image via percentage? If not, how could I fix this?
You can vist my website at erraticfox.tumblr.com if needed a example of the problem.
Oh and here's my headers CSS code:
#header {
margin: auto;
display: table;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px;
background-size: 110%;
}
Here's a jsfiddle, you might want to resize the width of the result window and you'll see my problem: http://jsfiddle.net/2AbKb/
Its not resizing here. I have removed 'display-table' as i dont think it was necessary.
HTML
<div id="hed">
</div>
CSS
#hed{
margin: auto;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px
background-size: 110%;
background-color:black;
}
I'd suggest something like this:
#header {
margin: auto;
display: table;
height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Lose background-attachment:fixed; Is that the effect you're after?