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.
Related
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;
}
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
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 a such a situation: http://jsfiddle.net/5axmtw9g/3/
<div class="content inner clearfix1 has-left-sidebar">
<div class="sidebar-left-menu prepended"></div>
<div class="content-middle">
<section id="about-stat" class="clearfix1 about-stat-section">
<h1>Some title</h1>
</section>
</div>
</div>
.inner {
margin: 0 auto;
width: 600px;
}
.content.inner {
position: relative;
}
.content .sidebar-left-menu {
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
float: left;
width: 160px;
}
.sidebar-left-menu {
background: #3b86c4 none repeat scroll 0 0;
color: #fff;
}
.content-middle {
margin: 0 0 10px 170px;
}
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
height: 590px;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
As you can see in the fiddle the fixed background image is positioned to the window not to the wrapper. I would like the image to be positioned at the start of "content-middle" div, as expected. Using any solution with background-size:cover is not working for me, as I shall avoid of image stretching.
Would be really grateful for help as I stacked on this and can't find a working solution.
Thanks in advance!enter code here
Try jquery
posBg();
$(window).resize(function() {
posBg();
})
function posBg(){
var posLeft=$('#about-stat').offset().left;
var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}
Fiddle demo http://jsfiddle.net/5axmtw9g/9/
I think you can achieve what you want by adjusting your background to the following:
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat center top ;
background-size: 100% auto;
The center-top will position the background to the right place. the size will display it at 100% width without adjusting the aspect-ratio. Now you just have to go for a bigger height div to show it full size (or a different background-image).
Demo
Background image X AXIS is 50% plus half the width of it's sibling container
https://codepen.io/AliKlein/pen/dVrmVO
section {
height: 100vh;
background-image:
url(https://source.unsplash.com/collection/194676/3);
background-size: cover;
background-attachment: fixed;
background-position-y: center;
background-position-x: calc(50% + 12.5vw);
}
I have a Image which I want that takes the whole screen but is leaving some white space at the top and at the left side of the screen and I don't know why is doing it. I attached the code of it.
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Add this css line:
body{margin:0;}
http://jsfiddle.net/mm08hruf/
You need to reset the margin on the body.
/* margin reset */
body {
margin: 0px;
}
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Try
html,body{
padding:0;
margin:0;
}