CODEWITHSUNDEEP
htmlruby-on-railscssbackground-image
DaveTheGray
DaveTheGray

Reputation: 29

Background-image on just the homepage

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?

Upvotes: 0

Views: 443

Answers (1)

zeantsoi
zeantsoi

Reputation: 26193

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.

Upvotes: 1

Related Questions