Implementing a background image layered over a background color using CSS

Currently, I am in the process of converting a webpage from PSD format. The main content of the page is designed with a solid background color, but there is also a separate layer that features a glow effect on top of the background. However, when implemented into the code, the solid background color seems to be overridden by the glow effect. Below are images illustrating what the current display looks like compared to the intended design:


Here is a snippet of the CSS code being used:

Html {
background: white;
}

#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}

#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}

Answer №1

You have the option to employ multi-background:

#primary {
  width: 900px;
  height: 955px;
  background: url(../images/slogan.png) no-repeat, #282d37;
}​

In detail: utilize the background css attribute, initially insert the image, then the background color.

VIEW LIVE DEMO

Answer №2

Your issue lies in the conflicting styles within your code. To rectify this, ensure that the background-color property is placed before any other background-related properties. Additionally, utilize the background-image property instead of just background. Separate each value into its own property to prevent the background property from overriding the background-color specification.

#main{
  background-color: #282d37;
  background-image: url(../images/slogan.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 900px;
  width: 955px;
}​

Answer №3

Consider using a different approach

background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;

Instead, try this:

background: #282d37 url(../images/slogan.png) no-repeat top left;

Answer №4

One solution is to enclose the #main section within a wrapper element where you can define the background color and adjust the opacity accordingly.

#wrapper{
  background-color: blue;
  height:200px;
  width:200px;
}

#main{
  background: url(http://www.example.com/image.jpg) repeat;
  opacity: 0.8;
  filter:alpha(opacity=80); 
  height:100px;
  width:100px;
}

<div id="wrapper">
  <div id="main">
  </div>
</div>

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

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...

AngularJS: Modify Z-Index on Click Event

My current project involves a navigation bar with four items, each accompanied by an icon. These icons are positioned absolutely one behind the other and are loaded into the view from different templates within the same controller. I am attempting to dyna ...

Removing page scrolling in Bootstrap 5: A step-by-step guide

I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is d ...

Blog Writer: Picture quality compromised when adjusting size

Issue with blurry images after resizing. The problem is noticeable in the three main images located under the Header section. To preview the blog, click on this link: Click Here Your assistance in solving this issue would be greatly appreciated. Thank yo ...

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Here are all the files and folders in my project located within the same directory. If you want to check out the project on Github, you can find it here: https://github.com/JohnsCurry/learnAngular. Just to confirm, they are all in the same folder. Unfortu ...

Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS. Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected. ...

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

Switching Up Poster Images in Chrome with Afterglow HTML5 Video on Hover

I have been experimenting with the html5 video player from AfterGlow. In my sample video, I included a poster attribute. However, I noticed an issue when viewing the video in Chrome - whenever I hover over it, the poster image flickers, creating an undesir ...

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

What is the best way to resize a primefaces inputTextArea to match the length of the

I am currently working on improving the appearance of <p:inputTextArea/>. When the page loads, I notice: And when I click on that TextArea: Here is the code: <p:inputTextarea rows="6" value="#{bean.object.value}" style="width: 100%;" /> Is ...

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...

What is the best way to eliminate file extensions from hyperlinks in this particular scenario?

Looking for solution in editing a php gallery code to adjust hyperlink destination. This php gallery script generates a gallery from a folder of images which, when clicked on, opens a larger preview with a hyperlink. However, the issue is that the link in ...

What causes IE11 to sporadically run inappropriate media queries?

My website has been displaying incorrectly on IE11 due to a media query being executed for widths less than 767px, even though the window width is actually more than that. Interestingly, this issue only occurs randomly and never when the debug window is op ...

Reverse the order of jQuery toggle animations

Looking for something specific: How can I create a button that triggers a script and then, when the script is done, reverses the action (toggles)? (I am currently learning javascript/jquery, so I am a beginner in this field) Here's an example: ...

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

IE throws an exception when attempting to use Canvas as it is not supported

One of my challenges involves working with a Canvas Element: <canvas id="canvas" width="300" height="300"> Sorry, your browser does not support the Canvas element </canvas> In my JavaScript file, I have the following code: var ct= docum ...

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

What is the best way to invoke an HTML file using a jQuery function in a JavaScript file?

When I call an HTML file from a jQuery function using require(), I am encountering an issue where I am unable to link the CSS with the HTML file. After running the file, only plain HTML is displayed without any styling. The structure of my HTML file is as ...

Is there a way to implement a scrollbar within a DIV element?

I'm working on a webpage that includes several customized buttons within multiple DIVs. Take a look at this example on the fiddle. Since I have a lot of buttons, I need to find a way to add a scrollbar so users can easily navigate to the desired butt ...