I wonder how the background on the following page has been made?
http://www.wohn-blogger.de/page/4/
As you can see the background is not a plain color. Is it an image that scales to the whole page? Or can this even be achieved with css somehow?
The reason why I'm asking is that the css contains the following:
body {
background: #0d1424 url(images/body-bg.jpg) no-repeat center top;
font: .81em/150% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
word-wrap: break-word;
color: #666;
}
Which would mean this is a single image that is not repeated. Anyhow how comes that the whole page is filled?
CSS:
body {
background: url("http://www.wohn-blogger.de/wp-content/themes/itheme2/skins/gray/images/body-bg.png") repeat scroll 0 0 #D1D1D1;
color: #666666;
}
There are a few ways to do this. It appears to be composed of a transparent gradient image and a texture image. In this case, I would approach this by adding the repeating texture to the html element and the transparent gradient to the body element.
html {background:url(texture.png);)
body {background:url(gradient.png) top left repeat-x;)
I hope this helps.
It appears the website has two body styles defined, the no-repeat getting overriden by a standard repeating background image.
Related
I have a simple html and css website which was working fine until i updated some content.
The main background is a colour with one image in the top right corner which is in the 'body' div properties. the font family is also in the 'body' properties.
everything else in my website (div layouts, menu bar background image and div back colours etc.) are all displaying ok, but i have no main background and all font is displaying at a small size and as serif when my set font family is san-serif.
body{
min-height:700px;
min-width:900px;
margin: 0;
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #666;
background-image: url(Images/backleave4.png);
background-repeat: no-repeat;
background-position: right top;
}
As its was working just fine before, i assume the issue is that for some reason its not reading all the body properties correctly.If anyone can give me some advice that would be awesome!
Thanks
EDIT:
Over night it somehow fixed itself, for the most part. I don't know what was wrong. Gahh technology!
Your posted CSS is fine. Can you post a link to the website?
Upgrade your #rightwrap to-
background: rgba(255, 255, 255, 0.6);
I think you want to show your background image all over the page.
I was trying to set my page a background image and yet it didn't seem to work the way I expected it to. Here's the code:
body
{
background-image: url("sf.jpg");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
I was wondering what went wrong here. Thanks in advance. Note: the image was in the same folder as the file i'm running.
Demo
Just a small change in your code.
body {
background: url("http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
Coz background size cannot be 100 it can be cover or contain, and use background instead of background-image and all, use a background-size:cover it will work
body {
background : url (ur image path);
background-size:cover;
width:100%;
//and other necessary code
}
Looks like you have double tab indent bring it all back on tab.
Change the permission of the image to 777 and the image will show up correctly.
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
I'd like to figure out how they're handling their background but can't seem to find it in the source code anywhere. If anyone can direct me to how to find it, and/or knows how their background is set up and wants to just point me directly there, I'd appreciate it. Thanks!
body {
background: url("images/body-bg.png") repeat scroll 0 0 #DADEE0;
color: rgba(0, 0, 0, 0.6);
font: 0.75em/150% "Lucida Sans Unicode","Lucida Grande",sans-serif;
word-wrap: break-word;
}
CSS which is using in http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
body
{
background: #dadee0 url(http://conversionxl.com/wp-content/themes/grido/images/body-bg.png);
}
It may look like just a white image, but click and drag after opening the image in a seperate tab and you'll see the pattern.
how to make my HTML 'font' edge match with background on css ?
i meant to make the color of a 'fat font'(font size) change pixel by pixel to match the background.
such as white font n black background. how to make the font edge color smoothly / gradually change match to background?
e.g.
<div style="font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;">
MY TITLE n LOGO
</div>
obviously this can do in photoshop as image, but that would break-my-rule-of-bandwidth. i want it to be HTML n CSS purely. IT IS POSSIBLE? is there any relationship to 'anti-aliasing' thing ? what is anti-alias actually? lazy mode
What you probably want to do (a bit unclear question) is to cast a blurring shadow to the text that has no offset. You can do that by applying a CSS style to your text using text-shadow property like so:
{text-shadow:0 0 2px #888;}
or in your case:
<div style='font-size: 24px;
weight: 600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-shadow:0 0 2px #888;'>
</div>
> Here's a Fiddle for it.
You can find a reference for this Text-Shadow CSS property at w3schools.com. It takes four parameters:
h-shadow: Required. The position of the horizontal shadow. Negative values are allowed
v-shadow: Required. The position of the vertical shadow. Negative values are allowed
blur: Optional. The blur distance
color: Optional. The color of the shadow.
Note that this property isn't supported in Internet Explorer browsers lower than IE10.
What you could do though for IE browsers is apply a blurring filter to the text:
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);
or a glowing filter:
filter:progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);
or both:
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1)
progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);
IE static filters reference can be found at http://msdn.microsoft.com.
Edit your like this
<div style='font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;'>
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.