What could be the reason for the background image not displaying?

Below is the HTML code I have:

<div class="content-wrapper">
  <div class="center">
    <h1>title</h1>
  </div>
  <div class="lr">
    <p> text </p>
  </div>
</div>

The CSS for the content-wrapper section is as follows:

.content-wrapper{ 
    background-image: url(/picture.jpg);  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

I am struggling to display the background image behind my text. I prefer not to set the background image directly in the body tag. Any assistance would be greatly appreciated. Thank you!

csshtmlbootstrap-4

Answer №1

Does this meet your expectations? If it does, then your code looks good. Just make sure that your image reference is accurate.

.content-wrapper{ 
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}
<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

Answer №2

Hey @Akansha, your code looks good overall, but there is one small issue - you forgot to specify a height for your container. Essentially, your background is present, but it's just not visible.

Remember that block elements have a default width of 100%, but they do not have a default height. Additionally, background images don't contribute to the element's height. So, make sure to include a height value.

.content-wrapper{
    height: 100vh;
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

You can check out how this code works live here: https://jsfiddle.net/j_pinder/nkLf03ao/2/

Answer №3

Make sure to specify the height of the image as well. Use height:100vh for full viewport height. You can also set the height in px or percentage.

.content-wrapper{ 
    background-image: url("https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg ");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
  height: 100vh;
}
<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </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

Dealing with an undefined variable problem in CodeIgniter

My current issue involves loading photos from the database using a for each loop to display each photo in a formatted div. However, I keep encountering an undefined variable 'imgres' and I am uncertain as to why. Here is the corresponding view c ...

phphtmlmysqlcodeigniter

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

javascripthtmlcss

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

Regular expression to match a string with a minimum of 10 characters, including at least 3 digits and alphanumeric

I need assistance creating a regular expression that validates strings with a minimum of 10 alphanumeric characters and at least 3 digits. For example: X6JV2YUW8T => True JN1H86LEKA => True 111JEJE134 => True A111111111 => True ABCDEFGHIJ =&g ...

javascripthtmlregexvalidationinput

Choosing a specific element within another element of the same type using JQuery

I've created a complex nested HTML structure shown below: <ul class="root"> <li>Foo 1 <label class="bar-class">bar</label> <ul> <li>Foo 2 <label class="bar-class">bar</label> ...

javascriptjqueryhtml

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

<a href="#goto">Link 1</a> <div id="goto">DIV</div> Whenever I click on the anchor tag, my webpage reloads and displays a new div with the ID of goto. This div was previously hidden but is now visible at the bottom of the page. I ...

javascriptjqueryhtmlcss

Having trouble with passing post data from jQuery ajax to a php page?

Attempting to retrieve post data using an alert() function, but encountering an issue where the data is not being passed to the PHP page. The result always shows {"success":false,"result":0} The goal is to transmit a password to the PHP page, hash it usin ...

javascriptphphtmljquery

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Struggling to figure out the right Material UI CSS class to style a reusable TextField component? You're not alone. Despite tinkering with InputLabelProps (specifically the shrink class), I can't seem to get it right. Here's the code snippet ...

cssreactjsmaterial-ui

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

phpcsshtmlpixel

Utilizing JavaScript to retrieve data from a self-submitting form

From my database, I am able to create a list of options for users to choose from. Once a selection is made, the values are submitted back to the same page and retrieved using Javascript. Within the same form, there are radio buttons and a multiple selecti ...

javascripthtml

Encountered an issue with CSS rendering for PDF files on Gitbook

I was able to use my CSS to customize the design of my Gitbook website. However, I struggled with implementing CSS for the PDF version. When I applied the same CSS used for the website to the PDF, the results were not consistent. It seemed like the CS ...

htmlcssgitpdfgitbook

Creating an element in jQuery without the need for a closing tag

My situation requires dynamically building HTML elements using jQuery. Firstly, I initiate the process with the following function: function createSection(divName) { $("#"+ divName).append("<section id='team' class='pb-5'>&b ...

javascriptjqueryhtmldom

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

javascriptjqueryhtmlscroll

How to align text to the right in an Android TextView using HTML

I need to display some HTML content in a TextView. I am aware that certain HTML tags are not compatible with Android, so I have turned to a third-party library to incorporate bulletpoints and numbered lists. However, I also require support for right alignm ...

androidhtmltextview

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Is there a way to update my Laravel pagination CSS to match my theme's CSS? I need help with this adjustment. Here is the HTML for the theme's CSS: <div class="row mt-5"> <div class="col text-center"> ...

htmlcsslaravellaravel-blade

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...

htmlcsstwitter-bootstrap

What is the process for converting an <input type="file> into a base64 string?

Currently, I'm attempting to send an image to my express backend by including the image directly in the post request body. var imgValue = document.getElementById("image").value; Within my post request: body : JSON.stringify({ image:imgValue ...

javascripthtmlnode.jsexpressfile