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.
Related
This is my code:
html, body {
background: url("media/images/maishahotbgimg.jpg") repeat;
It only appears on the homepage. I want it to appear on every page of my web
You create a main.cs file that you will insert in all your HTML files. This si, you Can get all the html files having the same background image.
You can use a single .css file linked in all your pages and apply the background in the css, for example:
body {
font-family: 'Open Sans', sans-serif;
background-color: #000000;
color: #FFFFFF;
background-image: url(../../imagesfolder/backgroundexample.svg);
background-size: cover;
}
I tend to use a background color in case the img can't load properly (connectivity issues or whatsoever)
This is my first question (and first post) on Stackoverflow. Hope to contribute more once I become skilled enough.
Anyway, I'm having trouble understanding why my background image appears when I reference it using css that's inline with my html, but not when I put it in a separate css stylesheet that the html links to.
Here's what my inline css looks like, which works fine:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
</style>
My styles.css file is shown below, which contains the exact same code:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
p {
font-family: 'Helvetica Neue' Helvetica;
font-color: white;
}
h1 {
color: white;
font-family: 'Helvetica Neue';
font-size: 3.5em;
text-align: center
}
.textbox {
background-color: beige;
height: 100px;
width: 100px;
padding: 10px;
margin: 50px auto;
text-align: center;
font-family: 'Helvetica Neue' Helvetica;
font-weight: 200;
}
</style>
...but it no longer shows the background image. Everything else from the css file (paragraph formatting, text size/color, etc.) shows up in the browser just fine.
Also, the html file, css file, and background image are all in the same directory. So I figured I don't need to use "/background.jpg", "../background.jpg", etc. which I've seen suggested in other cases in other posts on Stackoverflow.
I tried to find an answer to this but couldn't find one. Any help is greatly appreciated!
But, in a separate .css file, I typed the exact same code as above, linking to it in the html file by using:
Did you remove the <style> & </style> tags from the CSS file ? For example, like:
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
These HTML tags are only required around your CSS rules if you're including CSS directly into your HTML.
i need to see your file and folder structure.. makes sure the the stylesheet you are referring is in the same folder where the html is, if so the same code will do.. if you css is in another folder like in css/styles.css than you have to change the link as well as the href of stylesheet to something like ../image.png
the folder structure matters here
Take the style tags out of your .css file.
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.
this is the site: www.luckybabynames.in
This site background is perfectly coming in both firefox and internet explorer. But the problem is now with google chrome.
Here is the css for the body background
body {
background: url("images/img01.gif") repeat-x scroll 0 0 #FFFFFF;
color: #333333;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 12px;
text-align: justify; }
no inline style written in body Tag
But in google chrome after the page fully loads it writing itself some inline style in the body tag.
<body style="postion: absolute; width: 1583px; height: 449px; background-position-x: 0px; background-position-y: 34px !important; " class="backgroundPositionTuned">
But actually there is no style and even the class="backgroundPostionTuned"!
How to solve this?
This previous question suggests that this behavior may be caused by the uTorrentControl extension:
Chrome changing background image position
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.