Having trouble setting background images for CSS ID, but it's working perfectly for CSS Body

When working with my .CSS file:

Initially, applying the following styling:

body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100% 100%;}

The 

background-image:url('Images/Login_Background.jpg');
functions correctly

However, when I create an ID like:

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}

And apply this CSS ID to my <section id="login">, the 

background: url('Images/Login_Background.jpg');
style does not work!!!

Could you point out where I might be going wrong? I am exhausted from trying to figure this out!!!

htmlcssbackground-imagerelative-path

Answer №1

Make the following replacements in your code:

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}

Replace with:

#login {
background-image:url(Images/Login_Background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}

After making these changes, your code should work properly.

Answer №2

Uncertain about the outcome you're anticipating, but the background in the div isn't visible.

  1. Due to the background-repeat: no-repeat; property, here's a demonstration without it: http://jsfiddle.net/dBRQw/

  2. The height of the element is crucial. Keep in mind that an empty div has a height of 0px (unless specified otherwise or has content in it), leading to an invisible background like in this example: http://jsfiddle.net/dBRQw/1/

This likely causes the problem since you're also utilizing the 

background-position: center center;
property, positioning your 100px background in the center of that element.

Check out http://jsfiddle.net/dBRQw/2/ where I've set the width and height of the div to 900px so you can see the centered background. To sum it up, your issue may stem from the element having no height or content that defaults to 0px height.

Hope this provides some clarity for you.

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

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

javascripthtmlregextags

Initiate the video tag playback by using jquery.play() function

Is there a way to make the video start playing as soon as the overlaying absolute div has faded out? I've tried using javascript and autoplay, but it doesn't seem to work without controls enabled. Any suggestions? Check out the HTML code below: ...

jqueryhtmlvideohtml5-video

Position the flex item adjacent to the initial flex item using wrap mode only if there is extra space

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl ...

htmlcssflexbox

Tips for choosing the ancestor's ancestor in CSS

<div id="maincontent"> <div id="content"> <div id="admin"></div> </div> </div> Looking for a CSS rule that will target #maincontent only when #admin is present? I have a background color set in the admi ...

csscss-selectors

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

javascriptjqueryhtmlcssdynamic-html

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

javascriptcssfirefoxstyles

The W3C validator does not recognize any modifications made after jQuery and JavaScript have been applied

My goal is to ensure that my website passes all errors on the W3C Validator. I have encountered a few errors related to the alt text of images. In an attempt to address this issue, I wrote and added the following code to the <head> <script type=" ...

javascriptjqueryhtmlw3c-validation

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

Can you display the menu and then conceal it by clicking elsewhere?

I am facing a unique situation where the body tag does not visually wrap all content. In this scenario, I have 3 TR's that each contain 2 TD's - one for information and one for a yellow div. By clicking on the Info TD, a div opens (positioned a ...

jqueryhtml

HTML Code for Tracking Facebook Friends' Likes on a Page

I am looking to show the number of friends who have liked a page in HTML. Can someone please guide me on this? I am aware that we can get the page likes using a simple URL, but I specifically want to know how to retrieve the count of friends who liked a ...

htmlangularjsfacebooksocial-likes

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?

<div class="col-xs-3"></div> <div class="col-xs-6 col-sm-6 col-md-6" style="min-width: 320px;"> </div> OR <div class="col-xs-6 col-md-offset-3 col-sm-offset-3 " style="min-width: 320px;">` </div> I would like to remo ...

cssbootstrap-4

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

Having an issue loading a modal with Angular and populating it with a template. The main problem I'm facing is that the inputs are extending beyond the boundaries of the modal - attached below is a screenshot illustrating the problem: Below is the c ...

javascriptcssangularjstwitter-bootstrap

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Closing the dropdown menu by directly clicking on the button

I've noticed several inquiries on this platform regarding how to close a drop-down menu by clicking anywhere outside of it. However, my question is a bit different. I want the dropdown-menu to remain open once clicked, only closing when the user clic ...

javascriptjqueryhtmlcssdrop-down-menu

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

htmlcssangulartwitter-bootstrapbootstrap-4

php redirect back to the page upon form submission

I've designed an html form that allows users to input data, which will then be saved into a database using PHP: <form action="http://localhost/php/insert.php" method="post"> Barcode: <input type="text" name="barcode" /><br><b ...

phphtmlmysqlforms

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

javascriptjquerycsscalendar