CSS Code That Is Ineffective

Having some trouble with creating a hidden background that will still show up but not on the main content page. I'm looking to have a different background for the main content itself, but for some reason it's just not working. The main background is displaying properly, but the content background isn't showing up. Can anyone provide assistance?

body {
    margin: 0px auto 0px; 
    padding: 0px;
    overflow-x:hidden;
    background: #9fddf9 url(http://www.unwritten-quotes.com/images/bgfall.jpg) top center no-repeat fixed;
    width: 990px; 
    color: #000000; 
    font-size: 11px; 
    font-family:  Tahoma;
    letter-spacing:1px; 
    line-height:15px; 
}   

#shell {
    margin: 0px auto 0px; 
    padding: 0px;
    background: #91d8f4 url(http://unwritten-quotes.com/images/bg.gif) center repeat-y; 
    width: 990px;
}
htmlcss

Answer №2

Have you made any modifications to #shell? If you haven't specified a height for your div and/or it is empty, then it will not be visible.

<style>
body {margin: 0px auto 0px; padding: 0px;overflow-x:hidden;background: #9fddf9 url(http://www.unwritten-quotes.com/images/bgfall.jpg) top center no-repeat fixed;width: 990px; color: #000000; font-size: 11px; font-family:  Tahoma;letter-spacing:1px; line-height:15px; }    
#shell {margin: 0px auto 0px; padding: 0px;background: #91d8f4 url(http://unwritten-quotes.com/images/bg.gif) center repeat-y; width: 990px;}

</style>
<body>

<div id="shell">CONTENT</div>
</body>
</html>

You can also add 

height:100px;/*or whatever height you prefer*/
to your #shell

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

The Bootstrap class "text-right or text-end" does not seem to be functioning properly when applied to the <a> element

I've been attempting to apply the text-right or text-end classes to the anchor element at the end, but for some reason, it's not working as expected. I even tried using style="text-align:right !important;", but it still doesn't pro ...

htmlbootstrap-4bootstrap-cards

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

javascriptcssvue.jsdomnuxt.js

Exploring optimal practices for CSS components and responsive design integration

If I were to develop a reusable component like a table that will be used across various pages, the content and number of columns may differ from one page to another, but the overall design should remain consistent. .my-table { background-color: ... et ...

csssassresponsive

Tips for defining boundaries for position absolute elements using JavaScript

Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...

javascripthtmlcssresize

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

Dealing with Overflow in CSS DIV Elements

Link to site: Suddenly, without any changes to the css, I noticed that when I expand the "browse" categories, they overflow outside of the containing divs. Here is the css code for the divs: .bodyArea { width: 900px; background-image:url(/images/ ...

csshtmloverflow

Padding issues in navbar-expand for Bootstrap 4

I'm encountering a strange issue with padding in my navbar that seems to be dependent on the navbar-expand property. For instance, when I set it to MD, it appears like this: https://i.sstatic.net/czytc.png As you can see, the logo and menu button d ...

htmlcsstwitter-bootstrapbootstrap-4navbar

The Main page is being graced by a floating Twitter Bootstrap video

When trying to display a video next to a paragraph, I encountered an issue where the paragraph was taking up 100% of the screen and the video was floating over it, obstructing part of the text. Despite setting the row and cols, the layout wasn't behav ...

htmltwitter-bootstrapvideogridprogram-entry-point

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Delay occurs unexpectedly when adding a class with jQuery to multiple elements

I am in the process of creating a flipping counter that is designed to change colors once it reaches a certain target number (in this case, 1000). However, I am noticing that the different sections of the counter do not change color simultaneously, there s ...

javascriptjqueryhtmlcss

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

htmlcssgoogle-chromeborderoverlap

Is it possible to include both the value and text of a dropdown in form.serialize?

For my project, I need to serialize the form data. However, when it comes to dropdowns, only the values are captured and not the text of the selected option. <select name='attend'> <option value="1" selected="selected">Question&l ...

phpjqueryhtml

Once all the fields are filled, I would like for my button to trigger the opening of my

I need help figuring out how to summon my modal only when all fields are filled: <form action="" id="myForm"> <fieldset> <input type="hidden" name="action" value="contact_s ...

javascripthtmlbootstrap-4

Is the z-index functioning properly for the header call-to-action text on mobile devices, but not on desktop?

The desktop header cta is functioning properly, but when I switch to mobile nothing happens. I attempted to increase the z-index number within the html instead of in the style sheet. This is where my CTA is located in the html: CALL TO ACTION surrounded ...

htmlcssz-index

Tips on adjusting content to match column width in Bootstrap

I currently have the following HTML and CSS: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf5edf1">[email protected]</a>/d ...

htmlbootstrap-4

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

Netlify Alert: Build process ended with an error code: 254

Appreciate your assistance. I have a basic HTML file that I intended to host through Netlify. In my Git repository, I have three files - index.html, style.css, and a readme file. The structure of the HTML file is as follows: <!DOCTYPE html> < ...

htmlgithubnpmpackage.jsonnetlify

Is there a way for me to incorporate a self-referencing onclick event into each <a> tag?

My single page app requires that link clicks are not processed in the regular way, but are instead passed to my router. I currently have a menu code that works perfectly (with the goto function changing the HTML and returning false): <a class="nav- ...

javascripthtmljqueryonclickhref

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

After creating an HTML5 audio element and setting a listener for when its time updates, I have run into an issue where the ontimeupdate function does not fire in Chrome, including Chrome on Android. The audio plays without any issues in other browsers. va ...

javascriptandroidhtmlgoogle-chromeaudio

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition