I'm having issues getting the background color and background image to display properly in my CSS

Here is the code snippet I am working with:

.main
{
    width:63%;
    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;
    background-position:top-right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

I made an update to the code:

.main
 { 
width:63%; background:#eee; 
background:#eee url("../slice/gray-bg.jpg") repeat top right; 
float: left; 
margin-left: 0px; 
padding-left: 3px; 
}

Here is the HTML structure:

<div class="main">
<div class="section1">
<p id="author1"> Hotel Garden Elysee
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Paris, France</span></p>
<p style="display: inline; font-weight: bold;">January 20 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_1.jpg" alt="" />
    <p>non tincidunt augue placerat non.</p>
<p><a href="">More...</a></p>
</div>
<div class="section2">
<p id="author2"> S.Francesco al Monte Hotel 
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Naples, Italy</span></p>

<p style="display: inline; font-weight: bold;">January 29 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_2-11.jpg" alt="" />
    <p>non tincidunt augue placerat non</p>
<p><a href="">More...</a></p>
</div>
</div>

However, I am facing an issue with displaying a shadow on the left side similar to the example image shown here:

The main content section in the provided link displays a shadow on its left side.

Unfortunately, I am unable to achieve this effect. When inspecting the element, it seems like the shadow image is not being displayed correctly.

Any assistance on how to fix this would be greatly appreciated. Thank you!

Answer №1

When it comes to setting multiple properties like repeat on background-image, you may encounter some limitations.

An alternative solution is using the background shorthand, which allows for setting multiple properties at once:

background: #eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;

If needed, you can also set each property individually for more specific control:

.main {
    background-color: #eee;
    background-image: url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

Answer №2

When your CSS includes both background-image and background attributes, there may be a conflict that arises. I hope this information proves useful to you. Best regards :)

Answer №3

Kindly update the .main class in your CSS file:

.main{
    width:64%;
    background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat top right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

OR

.main{
     width:64%;
     background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") repeat top right;
     float: left;
     margin-left: 0px;  
     padding-left: 3px;  
}

Answer №4

To simplify, you could combine all styles on one line like this:

backgroud: #333 url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat right top;

However, it may be clearer to separate each style for better understanding:

    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: right top;

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

Is it possible to modify the CSS styles for a specific portion of an input value?

Currently, I am in the process of developing a form using React.js where a specific input must match the label written above it. Here is an example: https://i.stack.imgur.com/S2wOV.png If there happens to be a typo, the text should turn red like this: h ...

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

Having trouble retrieving information from the weather website

Hello, I am interested in extracting weather information from a specific website: On this website, there is a search bar that allows users to enter the name of any city in India. Upon pressing 'Go', the user is directed to a page displaying the ...

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...

Creating engaging animations for variable content in Safari using CSS

This multi-step wizard is designed to smoothly transition between its 3 steps. Upon clicking the "next" button in step 1, the content is pushed down to reveal step 2. Similarly, when advancing from step 2 to step 3, the contents of both previous steps are ...

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

I can't figure out why my code isn't functioning properly. My goal is to have a PDF file generated when the submit button is clicked on a form, and for a

Hello everyone, I am new to the world of programming, but I have been assigned a project that involves using jQuery, JavaScript, html2pdf, and Bootstrap 5. I seem to be facing some issues with my code. Can someone please help me identify what's wron ...

What is the process for setting a background image in a React application?

I need help figuring out how to add a background image to my React app. I've searched for solutions on StackOverflow, but I'm still unsure. The image I want to use is named background.jpeg and it's located in the same folder as my App.js fil ...

Creating a keyboard and mouse accessible drop-down menu

I have a project for a client that necessitates a unique drop-down menu, which can be accessed by clicking or using the keyboard to navigate to it. Currently, my solution is almost flawless, except for one issue: when you click the drop-down menu for the ...

Is there a way to verify if a button on a form has been clicked in an HTML file and then execute a script in Node.js?

As a newcomer to nodejs, I am currently working on one of my goals which involves sending data to a MySQL database based on the information entered into a form. I am seeking assistance on how to execute a function in nodejs when the button on the form is c ...

Hide a division when either the body or another division is clicked

<div id="container"> <div class='sub1'></div> <div class='sub2'></div> <div class='part1'></div> <div class='part2'></div> </div> When yo ...

Adjustable Column Spacing in Bootstrap

My layout consists of a row with three columns that adjust sizes based on the screen size. However, I encounter an issue when shrinking the screen, as I only want the margin to change for specific boxes. The following illustrates the appearance with no mar ...

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

Center-aligning images in Bootstrap Carousel

I've implemented the Bootstrap 4 Carousel on my website and it's functioning properly. However, I'm facing an issue where I need to align the slider image in the center of the carousel. Currently, the image is aligned to the left side, caus ...

Is it possible to leverage AngularJS string interpolation ({{}}) within the jQuery HTML function?

I am attempting to implement angularJs string interpolation within the Jquery html function $('#existingScoresForWeek').html("<p>{{1 + 1}}</p>"); Unfortunately, the code above is not displaying the Result as 2 <div data-ng-app=" ...

I'm finding it a bit difficult to arrange the placement of these DIV

Struggling with a layout issue here. I have a total of 4 DIVs that I want to position in a specific way: Initially, I floated DIV 1 to the left and DIV 4 to the right, which worked as expected. However, things get messy as soon as I try to include DIVs 2 ...