I am trying to include css sprites in my webapp. The thing is I have arranged my website background vertically in sprite image. Now, one portion of the sprite needs to be repeated vertically.
I was trying the following code...
#page-wrapper {
margin: 0px auto;
background-image: url(../images/background.png);
height: 100%;
width: 1000px;
}
#page-wrapper #content {
background-position: 0px -80px;
background-repeat: repeat-y;
height: 1px;
}
I am confused in the height property of content class. How should I define the height of the section which I want to repeat and the height of the div(#content)?
Regards
Vikram
You can repeat the sprite vertically if your sprites are arranged horizontally in the image.
You can not repeat part of an image in the background. Setting the height only changes the height of the #content element. The images is always repeated completely.
Related
I am using yahoo's pure.css layout and I am having some small issues. I have a logo which would replace the heading and i want the logo to be fluid as well(The size changes with the bsize of the browser window).
I am currently using the following:
h1.logo{
background-image: url('../images/LogoColor287x86.png');
background-size: 100%;
text-align: center;
background-repeat: no-repeat;
width: 100%;
float: none;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
This works but the result is not what i want. The above piece of CSS ensures that the logo occupies the maximum size available to it. But I want to to have a maximum size and centered. Say it should be a maximum size of 500px width even though the amount of space(width) available to it is 1000px.
Anyway to constrain the proportions.
For making the logo center use the property background-position: center center.
Also see jsfiddle: https://jsfiddle.net/Saiyam/7fzfoy43/2/
If I understand your problem correctly, you would like a background image to have a maximum size while remaining centered and scaling correctly when less space is available?
I accomplished this with nested elements - one positioned relative and taking the maximum space available to it. The nested element positioned absolute with the maximum values defined and then taking advantage of
background-size: contain;
See JS fiddle here: http://jsfiddle.net/4bgcokux/2/
put your logo inside a div with css text-align: -webkit-center;
HTML:
<div class="header">
<h1 class="logo"></h1>
</div>
CSS:
.logo {
background-image: url('https://images.google.com/intl/en_ALL/images/srpr/logo11w.png');
background-size:contain;
padding-top: 29.8%;
max-width: 50%;
background-repeat: no-repeat;
}
.header {
text-align: -webkit-center;
width:100%;
}
Hope it helps you...
here is my css by which i position one image on at center.
.BusyStyles
{
background-image: url('../images/busy.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
can i enhance the above css as a result i can place another image at center on the div just below the busy.gif......is it possible? if yes then please give me the css by which i can position two image as background for div at center one after one. thanks
Check sample for two background image in a single div tag.
CSS:
.container{
width:300px;
height:150px;
background:url(http://img.b8cdn.com/images/icons/loading_large_icon.gif) no-repeat 50% 28%, url(http://twitter-badges.s3.amazonaws.com/t_logo-a.png) no-repeat 50% 60%;
border:1px solid #CCCCCC;
}
You can only do this in CSS 3 (http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css)
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
I agree with LiamB's solution to this if you have the ability to only support browsers that are compatible with CSS 3.
However, if you need to support more browsers than that I recommend you solve this problem by having 2 divs. Both divs will be positioned on top of each other. The div positioned below contains only a background image. The div positioned on top contains another background image (positioned to look as if it is below the background image from the other div) and any content you want to have.
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I want to have a fixed position background image that scales and I need it to have a 220px top margin and a 170px right margin so that the image is not under the navigation bars. I have come close with the following code but the right margin varies due to the percent.
#container_hu
{
width: 100%;
text-align: left;
background: #fff;
border: 0px solid #000000;
height:100%;
padding-top:260px;
min-width:1100px;
background:url(../images/bg_image.jpg) no-repeat;
background-attachment:fixed;
background-position: 78% 220px;
background-size:25%;
}
Thanks for any help!
You can use CSS3's background-clip property to force clip the background to within the allowed content area. i.e. you can specify a padding to your DIV (to cover the nav bars etc..) and specify the background-clip property to content-box to achieve this. Example CSS below:
#container_hu {
/* this forces the bg to be rendered only within allowed content area (CSS3) */
background-clip: content-box;
background-image: url("your_image.jpg");
background-repeat: no-repeat;
/* this forces the bg to stretch with the container (CSS3) */
background-size: 100% 100%;
height: 300px;
width: 400px;
/* specify the top/left pixels to cover your nav-bar etc. */
padding-left: 50px;
padding-top: 50px;
}
So to start off its 170px right margin and then a percentage from what you describe.
I would consider 2 options:
Redo your entire layout in ems for all dimensions, margins, puddings etc. with a base unit on body. That way you may have more of a chance of things lining up. (in essence I'm saying start with ems, scale up in ems, as %age will not work)
You could also start with pixels and scale up in pixels but you'll need JavaScript to do the calculation and apply the new margin right onResize.
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}