So for example the picture below I'm having typing giving each class="container" it's separate background colour/picture.
<div id="p" class="container">
</div>
style sheet
p.container {
background-image: url(img/this_is_top.png) repeat;
}
CHANGING QUESTION for some reason I have having trouble in setting a background Image* for it.
Regarding your background image problem you currently have
background-image: url(img/this_is_top.png) repeat;
This is wrong. But you are thinking of the background shorthand CSS property which follows this syntax:
#p.container {background:#ffffff url('img/this_is_top.png') no-repeat center center;}
And if you are styling in your stylesheet and your folder hierarchy is the usual (/~/>/img etc) then it should be:
#p.container {
background-image: #ffffff url('../img/this_is_top.png') repeat center center;
}
Notice the double dots before the url to tell CSS to look up a level for the img folder
For starters, having multiple id's with the same name on the same page is not such a great idea. http://css-tricks.com/the-difference-between-id-and-class/
Related
I have a html file with a div like
<div id="mydiv" class="mydiv">...</div>
In that html, I have one css file (mycss.css) linked.
at 600th line of that css file, I have
#mydiv
{
float:left;
background-image: url(divimg1.png);
background-repeat: no-repeat;
width:44px;
height:43px;
}
at 700th line, in the same css file, I have
#mydiv
{
background-image: url(divimg2.svg);
}
Now, most of the time I am getting divimg2 but very rarely/intermittently I am getting divimg1. I was under impression that when browser reads css files, it read top to bottom and closest one that means divimg2 should appear all the time. What am I missing.
I understand there shouldn't be two occurrences of same class but here I am looking for why for the above case, behaviour is intermittent?
Use important tag in CSS to get first preference.
#mydiv
{
background-image: url(divimg2.svg) !important;
}
This works in my CSS file:
.blog-title-section {
background: image-url('banner-bg.jpg') no-repeat center center;
}
However I would like to make the background dynamic in my html.erb file, so far I've tried
<style>
.blog-title-section { background: image-url('banner-bg.jpg') no-repeat center center; }
</style>
and
<div class="blog-title-section", stlye="background: image-url('banner-bg.jpg') no-repeat center center;" >
Neither of which are working. When I find something that works I'll replace "banner-bg.jpg" with #blog.image.
I think problem on your image path, like if your image have app/asset/images/banner-bg.jpg
Then your code will image-url('assets/banner-bg.jpg') OR image-url('/assets/banner-bg.jpg') OR image-url('../assets/banner-bg.jpg') which you need
I am working on an application and am attempting to show the header image using #URL.Content from within the CSS sheet, like so
.jumbotron .header-image {
min-width:1024px;
min-height:267px;
background-image: url('#Url.Content("~/Content/images/header.png")');
the image is there but all I get is a square box where the header should be. I am displaying it simply enough
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
Where am I going wrong?
EDIT
#Jesse this is all of it:
.jumbotron {
text-align: center;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.jumbotron .header-image {
min-width:1024px;
min-height:267px;
background-image: url('#Url.Content("~/Content/images/header.png")');
}
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
I cannot figure out why this isnt working, it looks correct
I believe you are getting a conflict with your two background style declarations, one in jumbotron and the other with .header-image. Is there a reason you want to use:
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
instead of just:
<div class="jumbotron">
<div class="header-image"></div>
</div>
I have some following suggestions. See if it can help you. Have step by step approach.
Firstly, Instead of the code <div class="jumbotron header-image"> you can simply use it as <div class="header-image">. Because, with the Combination you can still get the desired effect. [I know, you are using class jumbotron to have transparency]
Second, make sure as what is the path that your code assumes/renders. As you are using #Url.Content("~/, it gives you, your application root. That means if you try to construct the URL as http://YOUR_APPROOT/Content/images/header.png [Please change your APPROOT appropriately, before checking] and put in the address bar of the browser, you should see the Image. If you are not, then there should be some issue about the Path. Just a guess.. Is the folder Content, in capital letter or small? Just check.
Third, somewhat similar posts from SO may be of some use to you. Just Check:
Is there a benefit to using #Url.Content("~")
slash(/) vs tilde slash (~/) in style sheet path in asp.net [Refer the Accepted Answer of this post]
Hope this will help you solve your issue. Good Luck
I have one page and I have applied style.css to it and in that body has given by default one background Image which will set automatically by adding css file to that page.
But in that I want all formatting same but I want to change body background image.
So what I will have to do to override the css formatting ?
In style.css I have given :
body
{
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
But I want bg.png as it's background So I have used :
<body background="images/noise-bg.png">
Is there any way ?
Something like this should work:
<body style="background-image: url(images/noise-bg.png)">
In terms of specificity, the style attribute should be more specific than styles defined in a stylesheet.
You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/
Set the background-image property.
You can give a different id attribute to the body tag for pages in your site.
For example for the home page you can use:
<body id="home">
And for another page you can use:
<body id="other">
Obviously these id names are just examples, use the ones that make most sense for your site.
Then in the CSS you can target specific pages like:
body#home {
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
And for another page you could use:
body#other {
background: url(images/another-bg.jpg) repeat-x #e4e9ec top;
}
Hope that helps.
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.