Is it possible to apply a different background image to a separate HTML file using the same CSS?

I am facing an issue while trying to change the background image on my second HTML page using CSS. The problem is that the background image is being applied through the same CSS file, so any changes I make affect both pages. How can I ensure that the background only changes on the second page?

What steps should I take, either in the CSS or within the code of the second HTML page, to isolate the background change to just the second page?

header {
  background-image: url(../wa.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}
<header>
  <div class="main">
    <div class="logo">
      <img src="../logo.png">
    </div>
    <ul>
      <li class=""><a href="smth.html">Home</a></li>
      <li><a href="">Contact me</a></li>
      <li><a href="#">Assignments</a></li>
      <li><a href="#">Info</a></li>
    </ul>

htmlcss

Answer №1

To achieve this effect, you can differentiate the header on the second HTML page by applying a specific class to it and setting a different background image just for headers with that class.

header {
  background-image: url(../wa.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

header.second-page {
  background-image: url(../different-image.jpg);
}
<header class="second-page">
  <div class="main">
    <div class="logo">
      <img src="../logo.png">
    </div>
    <ul>
      <li class=""><a href="smth.html">Home</a></li>
      <li><a href="">Contact me</a></li>
      <li><a href="#">Assignments</a></li>
      <li><a href="#">Info</a></li>
    </ul>
</header>

Answer №2

Consider adding specific classes to the header elements based on the page they represent, such as "homepage" for the homepage and "aboutpage" for the about page.

Homepage:

<header class="homepage">
...
</header>

The corresponding CSS would look like this:

header.homepage{
background-image:url('...');
}

About Page:

<header class="aboutpage">
...
</header>

The corresponding CSS would look like this:

header.aboutpage{
background-image:url('...');
}

Answer №3

I managed to resolve the issue by assigning different tags to the two bodies in the respective HTML files.

  #page1 header{
    background-image: url(../wa.jpg);
    height:100vh;
    background-size: cover;
    background-position: center;
}
#page2 header{
    background-image: url(../secp.jpg);
    height:100vh;
    background-size: cover;
    background-position: center; 
}

html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for incorporating animation into the CSS properties of an element as the class is updated using jQuery

The issue: I am facing a challenge with an HTML element that has a class called hidden which hides the element with the css attribute display: none;. When I use JavaScript to remove the class, the element immediately becomes visible again (the original di ...

javascriptjquerycss

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

The border on a specific field is not showing up when using Django Crispy Forms

Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...

htmldjangobootstrap-4django-crispy-forms

The .ogv video file type does not seem to be functioning properly within the HTML5 video tag on Firefox

Hello, I'm encountering some issues with playing the .ogv file in Firefox. If you could take a look at the link , that would be greatly appreciated. I believe my HTML5 video tag syntax is correct as it's working fine on other browsers. Thank you ...

htmlwordpressvideo

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

Straightforward, rudimentary example of Typescript knockout

I am hoping to successfully implement a basic TypeScript Knockout example. I utilized Nugget to acquire the TypeScript Knockout and downloaded Knockout 3.0.o js. Below is my TypeScript file: declare var ko; class AppViewModel { firstName = ko.observa ...

javascripthtmlknockout.jstypescript

Ways to reduce the size of the background image in a select element?

Utilizing the bootstrap form-select select element : <select class="form-select listbox_length_menu_datatable" <option value='5'>5</option> <option value='10'>10</option> <option value ...

cssbootstrap-5

Getting the JavaScript file name within another JavaScript file - a simple guide

Imagine having an HTML file that references two external JavaScript files. One of these JavaScript files contains errors (likely compilation errors), while the other file includes an onerror method without any issues. When you open the HTML file in a brows ...

javascripthtml

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

javascripthtmlcssbootstrap-4

Electron framework experiencing compatibility issues with JQuery

I am currently attempting to integrate jQuery with the electron framework using electron fiddle. However, it seems that jQuery is not functioning correctly and animations are not being executed. For reference, you can check out the example: https://www.w3s ...

htmljquerynode.jsnpmelectron

The alignment in the center is lacking consistency

Is anyone else experiencing issues with the duration and current time text not staying centered vertically? It seems to be a hit or miss, sometimes centering correctly and other times not. What could be causing this inconsistency, especially when no code c ...

htmlcss

When scrolling, the sticky <td> element on the table is overlapping with the sticky <th> header, causing the <td> border to disappear. What is the solution to fix this issue?

I am trying to set up a table that has a fixed header when scrolling up and a fixed first column when scrolling left. I have applied 'position: sticky' with 'top:0' for the header and 'left:0' for the first column. However, I ...

htmlcsshtml-tablebootstrap-4sticky

Delete the following td when the mouse hovers over it

How can I modify my code to remove the next td on mouseenter of a particular td? Currently, my code is removing the first occurrence of mouseenter on any td and the current mouseover td. Here is the snippet of my code. Can anyone help me identify what&apos ...

jqueryhtml

What is preventing me from viewing my cards in flex or grid layout?

Recently, I created cards for my team members, but encountered layout issues despite using CSS Flexbox and CSS3 Grid. Although both are supported by my browser, the problem persists. However, the layout works perfectly on mobile devices! I experimented wi ...

htmlcssweb

Adjusting the div's background color according to a pre-determined choice in a select menu generated by PHP

My webpage features a select option menu generated by PHP, offering the choices 'Unverified', 'Verified', and 'Banned'. I am working on automatically changing the background color of the statusField based on the pre-selected ...

javascriptphphtmlcss

Dealing with JQuery and CSS issues on Internet Explorer

Recently, I've been working on a code snippet to maximize a video panel upon page load or resize. Utilizing JQuery 1.4.4, the implementation has been smooth sailing on Chrome, Firefox, and Safari. Drawing inspiration from various online resources, I&a ...

javascriptjquerycssinternet-explorerwidth

Enhance the appearance of your responsive embedded video with a stylish border

I'm attempting to give a decorative border to a flexible embedded video. I've experimented with two different techniques to display the video: 1. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsiv ...

htmlcssvideobootstrap-4

Employing a button for navigation (GET request)

Is there a way to make a button act as a link in ASP.NET without using Response.Redirect? I want to avoid the extra trips (POST and GET) to the server that would occur if I used it in the button's OnClick handler. If this is not an option, how can I ...

htmlasp.netcsswebforms

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

javascriptjqueryhtml

What is the process for removing a full row from a table in PHP?

Is there a way to add a delete button to delete an entire row in a MySQL database? Below you can find the code and instructions on how to delete a row using the ID, which is the primary key. <?php mysql_connect('localhost', 'off', ...

phphtmlmysql