I'm trying to set a texture background to a container div. My CSS is below:
.container {
background-image: url(..img/texture-one.png) repeat;
}
My problem is, the image isn't showing up. If I make an img tag in my HTML, the image shows up using the same path.
.container {
background-image: url("img/texture-one.png");
background-repeat: repeat-y;
}
background-image can have only image path.
background-image: url|none|initial|inherit;
background is shorthand for multiple background properties.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
So you need:
.container {
background: url(..img/texture-one.png) repeat;
}
Perhaps just add quotes around image link?
.container {
background-image: url("img/texture-one.png");
}
Can you show the HTML code too?
If you have floated elements inside the container, then the height of the container is 0, so you can't see a thing. In this case, you should use overflow: auto; on the container.
Related
When I open the HTML file the background img is centered but after uploading the files to Wordpress the background is centered to the right of the screen. I'm at a lost for what the problem could be.
here's the code
body {
line-height: 1;
background:url(images/shopbg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80%;
background-position: center center;
background-color: black;
Your styling is applied to the <body> tag and when you are uploading your file you probably have other css files with classes on the <body>. You could create a specific class for your element and apply the styling there.
try create div and put the image and add a class to manage the image, or you need to see the image type background???
Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
http://www.hamdenway.co.uk/portfoliojavascript.html
I am building a website portfolio for applying for apprenticeships. I made a generator with JavaScript which prints out results in a list through output.innerHTML.
It all works fine but when it prints off the page, the background image cuts off. I want the background image to continue repeating for the new content.
In Brackets in my stylesheet I am hovering over body {} and it doesn't update the height for the newly generated content. I thought it would do this as:
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
height: 100%;
padding-top: 100px;
margin:0px;
}
So result is this horrible cut-off of the background image. If you need any more code please ask.
Remove height:100% from body css. Just open the console of browser and remove the height to test it
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
padding-top: 100px;
margin:0px;
}
I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center).
Its like putting 2 images in BG smaller one over the another. How could I do that?
And I have to do that in javascript/jQuery.
How about using pseudo elements.
CSS desk demo
body
{
background:url(http://placehold.it/200x100) repeat;
}
body:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/200) center center no-repeat;
}
Using css3 you can achieve something like this (two images), since your question is tagged with HTML5, so I think you can use this probably
body {
background: url('paper.gif'), url('another.gif');
background-repeat: repeat-y, no-repeat;
}
This is an example but not sure how you want to place both images.
Either apply a z-index:{NUMBER}; that is greater than the body's z-index (default 1) if you don't mind the top of your background image being cut off (or you can just edit the image to have an empty bar at the top to account for your header).
Or, apply your background not to body, but to whatever your main content div underneath your header is.
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/