If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
Related
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.
In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).
Basically each of the divs should look like so:
So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?
Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.
It's based use some properties like:
float and vertical-align.
This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.
Oh man I got a fun solution for you that may work but none the less is a solid idea!
If you set the image as the background you can avoid floating or positioning.
.section {
background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
background-position: center right;
background-size: contain;
width: 100%;
}
The only thing that I may find to be a problem is the image size is based on the content inside of the div.
JSFIDDLE
This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/
background-size: 80px 60px;
Fixed size
With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.
min-height
Few days ago i've noticed, that if a website have a background and if you overlap transparent PNG image on the div, the divs background disappears... Maybe it's only my computer rendering glitch, so I'll attach Screenshot too.
JSbin for index and css
Try:
body{
background:url('image') no-repeat top left;
}
You should not use 'background' in HTML tag!!!!!
html{
background:url('image') no-repeat top left;
}
Are you sure you don't have two images on top of each other? it seems like you have a colour image with a grey-scale image underneath.
If so, remove the bottom image.
EDIT: sorry, it seems to be an image change problem when you hover. Look at changing what the image switches to
I'm creating a website designed by a print-designer. The background concists of two images:
one gradient that is repeteated along the y-axis and aligned with the bottom of the page
one image that is aligned with the bottom of the page and centered.(the circle)
demo:
The circle-part is pretty big and has most of the pages content on it. (~900px by ~750px).
If the page is to small I need to add scrolls. If the page is to big. I need the first image(vertical) and background-color(horizontal) to fill out the area for me. I would like to use multiple backgrounds, but the site needs IE8-support.
Cut a 1px strip for the gradient and repeat it horizontally on the body. Set the attachment to fixed.
Cut out the circle and place it as the background image of your content container. This will likely be a png with transparency to allow the previous gradient to show through.
CSS
body {
background: url('bg.jpg') center bottom repeat-x fixed;
}
.container {
background: url('circle.png') no-repeat center bottom;
margin: 0 auto;
min-height: 750px;
width: 900px;
}
HTML
<body>
<div class="container">
content here
</div>
</body>
Alternatively, you can use CSS3 to place the gradient and avoid the image altogether. Some older browsers won't support it, but it's a little more flexible than using a static gradient image.
Check out this handy generator - just select the colors and style and it will give you the code: http://www.colorzilla.com/gradient-editor/
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.