I want to build an application that on its homepage contains a background-image. The issue I am having is that the only content on the home will come from a layouts/header partial and as soon as you go to another controller's views, the background image should not be there.
I realised that if I type body{ background-image: url('background.jpg') } it will work but it will also be there for every other page.
The other problem is that the code below works, only if the content of the page is big enough to cover the image's size.
app/views/store/home
<div class = "home">
</div>
css
.home {
background-size: 100% 100%;
background-image: url('background.jpg');
}
So, the background image doesn't appear on the background. What css rule should I apply to get that working?
Create a <body> id attribute that you can dynamically pass the value of the current controller and action to:
# app/views/layouts/application.html.erb
<body id="<%= params[:controller]+'_'+params[:action] %>">
So assuming that your <body> id is home_index, you can target the following in CSS:
body#home_index {
background-size: 100% 100%;
background-image: url('background.png');
}
This way, only the <body> tag on the homepage (presumably the one rendered from the index action of the home controller, in this example) has the CSS style applied to it.
Related
enter image description hereWhen using the img tag, the alt text is shown, and using background-image property works totally fine.
HTML Code
<div class="topbar">
<img src="../../assets/images/p-icon.jpg" alt='Profile Pic' />
</div>
CSS Code
.topbar {
img {
background-image: url('../../assets/images/p-icon.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
}
}
Is your CSS in a subdirectory, perchance? I've done that plenty of times when copying over paths.
If your CSS is in a subdirectory (e.g. /assets/css/style.css) and your HTML is in a parent directory (e.g. /index.html), then you're in need of a path change.
Besides that, there's no obvious reason it wouldn't work with the information provided.
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.
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/
I am trying to change the anchor tag image on hover and active, but it is not working.
HTML:
<div>
<div id="accordion">
<h3>test</h3>
<div class="acsection" runat="server" id="divCollection">
<ul>
<li runat="server" id="collectionmenu1">page-1</li>
<li runat="server" id="collectionmenu2">page-2</li>
<li runat="server" id="collectionmenu3">page-3</li>
<li runat="server" id="collectionmenu4">page-4</li>
</ul>
</div>
</div>
<h3>Group</h3>
<h3>Send</h3>
<h3>contact</h3>
</div>
CSS:
#aCollection
{
background-image: url(images/collection.jpg);
}
#aCollection:hover
{
background-image: url(images/collection_hover.jpg);
}
#aCollection:active
{
background-image: url(images/collection_active.jpg);
}
Try this one. it's working :).
just add src= for the hover image and when the mouse out also add src=.
<img src="blah.jpg" onMouseOver=src="blah-hover.jpg" onMouseOut=src="blah.jpg">
A tag is a inline element. You need a block element.
#aCollection {
display: block;
width: 50px;
height: 50px;
background: url('../images/image.jpg') no-repeat top left;
}
#aCollection:hover {
background-image: url('../images/image_hover.jpg');
}
#aCollection:active {
background-image: url('../images/image_active.jpg');
}
Are you absolutely sure that your CSS is targeting actual image URIs? In other words if your CSS is part of the HTML document itself then your images should be in a folder called images relative to the current HTML document.
However if this CSS is part of an external stylesheet which is located in lets say the css folder you need to use a relative path which will go one level up to access the images.
css
-> stylesheet.css
images
-> collection.jpg
page.html
Your stylesheet should contain background-image rules in the following format
background-image: url('../images/collection.jpg');
BTW, using separate images for what you are trying to achieve is not such a good idea for at least two reasons:
Every image is an additional browser request - too many requests can clutter the initial page display
Additional images are loaded only on request (when you move your mouse over the link, click it etc.) which will produce an ugly flickering effect in time the requested image is actually loaded
Therefore use CSS sprites to eliminate both of these problems.
Try to wrap your URLs with quotes,
**stylesheet code**
#aCollection
{
background-image: url('images/collection.jpg');
}
#aCollection:hover
{
background-image: url('images/collection_hover.jpg');
}
#aCollection:active
{
background-image: url('images/collection_active.jpg');
}
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.