The footer is not displaying the background image properly

Currently in the process of creating my website. I've successfully added my banner and footer, but unfortunately, I'm facing an issue with the background. It seems to not be stretching out properly, leaving some empty white space.

Click here to see what's happening:

When I try using background-size: 100%, the background disappears entirely. The same thing occurs when I attempt to use background-size: cover;.

Here is a snippet of my HTML code:

<div class="content">
</div>
<div class="footer">
</div>

And here is the relevant CSS:

.content {
min-height: 690px;   
background: url("background.png");
background-size: 100%;
}

.footer {
min-height: 200px;
background: url("footer.png");
background-repeat: repeat-x;
}

Answer №1

.content {
min-height: 690px;   
background: url("background.png");
background-size: 100% 100%;
}

.footer {
min-height: 200px;
background: url("footer.png");
background-repeat: repeat-x;
}
<div class="content">
</div>
<div class="footer">
</div>

You forgot to include a ; after setting the background property with

background: url("background.png")
.

Please make sure to add the semicolon as shown in the corrected code above.

I hope this clarifies things for you.

Answer №2

Why not use background-size: cover instead of setting it to 100%? With cover, the image will always fully fill its container by stretching and cropping any extra space.

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

Show the cost on the HTML page according to the chosen currency option

I am currently dealing with two primary currencies in my business. The product page is created using HTML. There are 4 products on a single page, and I wish to display two prices for each product based on the selected currency (USD or EUR) without having t ...

Verifying the number of div elements within an if condition

I've been attempting to determine the number of div elements in my DOM. However, when I try to assign this count to a variable, it displays as undefined in the console. Strangely, when I utilize an alert, it correctly shows the value as "8". My goal ...

Struggling to resolve problem with MoveTargetOutOfBoundsException or encountering difficulty scrolling into view in Firefox

Despite trying numerous options, I've hit a roadblock in Firefox where my code can't seem to locate an element that is clearly visible on the screen. Below is a snippet of my code including variable declarations: ''' *** Variables ...

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

Here are some examples of divs: <div id="1" data-effect-in="swing" data-effect-out="bounce"></div> <div id="2" data-effect-in="swing"></div> <div id="3" data-effect-out="swing"></div> <div id="4" data-effect-out data ...

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

Refine the pandas Dataframe with a filter on a JavaScript-enabled website

I recently inherited a large software project using Python/Flask on the backend and HTML/Javascript on the frontend. I'm now looking to add some interactivity to one of the websites. I have successfully passed a dataframe to the webpage and can displa ...

Modifying the src attribute of an object tag on click: A step-by

So I have an embedded video that I want to dynamically change when clicked on. However, my attempt at doing this using JavaScript doesn't seem to be working. <object id ="video" data="immagini/trailer.png" onclick="trailer()"></object> H ...

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

Keep the button in a single color unless it is being hovered over

Is there a way to create a button that changes color on hover, then reverts back to its original color after it's clicked? I'm facing an issue where my button initially has a red gradient, then changes color when hovered over, but turns white on ...

Using JavaScript Object Constructor to alter text color

Seeking some guidance as a newbie here on how to deal with a problem I'm currently tackling. I understand that using an object constructor may not be the most efficient way to handle this, but I'm eager to enhance my knowledge of objects. My quer ...

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

Icon-enhanced Bootstrap dropdown selection

I have a unique select dropdown using Bootstrap where I want to display icons like the example below: https://i.sstatic.net/dZmTS.png <!DOCTYPE html> <html> <head> <script src="/scripts/snippet-javascript-console.min.js?v=1"& ...

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

Tips for resolving issues with media queries in CSS

After deciding to create both desktop and mobile versions of my site, I attempted to utilize media queries in CSS. Unfortunately, after coding them, I discovered that they were not functioning as expected. Seeking a solution, I turned to Youtube where I ca ...

How can PHP be used to replace the div html() function?

I am working with multiple product elements that are dynamically assigned their class and ID using PHP: $product1["codename"] = "product-1"; $product1["short"] = "Great Product 1"; $product2["codename"] = "product-2"; $product2["short"] = "Great Product ...

What is the process for transferring input field values to PHP?

I am working on setting up a database and login form, and I need to create a PHP script to validate the login credentials. What are the different types of data access and how can they be utilized? Specifically, how do I retrieve user input from elements ...

switch from material ui lists on/off

Trying to learn React through coding, I've encountered an issue with displaying the 'StarBorder' icon next to folders when clicked. Currently, clicking on any folder displays the 'StarBorder' icon for all folders. Any tips on how t ...