Having trouble displaying the image on the webpage

Here is the code for my header where I am trying to set the background.

<header>
  <img src="images/MeMain.jpg" alt="Drawing of Me" class="profile-image">
  <h1 class="tag name">Hello, I’m Me.</h1>
  <p class="tag location">My home is Blank, Blank.</p>
</header>

Below is the CSS code associated with it:

header {
  text-align: center;
  background: url('images/portland.jpg') no-repeat top center ;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}

Although the image appears when coded into the HTML page directly, it does not appear when using a URL. I have tried various ways, such as moving the picture or changing the URL format to ('.../images/portland.jpg'), but nothing seems to be working so far.

htmlcss

Answer №1

Looks like you may have added one extra period in the URL path of your CSS. By the way, modern browsers no longer require quotes in the path.

Here's a suggestion:

.header {
background: url(../images/portland.jpg) no-repeat center center fixed;
background-size:cover
}

You can customize your site with a different background for mobile screens like this:

@media only screen and (max-width: 48em) {
    .header {background: url(../images/portland-portrait.jpg) no-repeat center center fixed;}
}

Source - http://fritzemedia.com/

Answer №2

One problem is the excessive use of periods.

A better approach would be to use

("../photos/portland.jpg")

Your original code had multiple instances of unnecessary ellipses.

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

Two problems encountered with the scroll bar feature on a tabular display

Have 2 inquiries about the table displayed below: Question 1: The height of the table is set to 500px, but I am puzzled by the fact that it seems like the content below, which is not part of the table, appears within the table due to the scroll bar exten ...

phphtmlcss

What are some ways to enable text highlighting when it is disabled?

I've encountered an issue with text highlighting in my asp.net web application when using the latest versions of FireFox and Google Chrome. Strangely, pressing CTRL+A also does not work for all input fields. I haven't had the opportunity to test ...

csscross-browserhighlighttextselection

degree of transparency when semi-transparent elements overlap

Imagine you have two <div> elements, one with an opacity of .5 and another overlaying it with the same opacity. What would be the combined opacity of the two? Interestingly, it's not as simple as, .5 × .5 or even, .5 + .5 How can this ...

htmlcssmathtransparency

The variables are filled with HTML tags that will render the display in

I am facing an issue with displaying HTML tags in my website. When I try to print a variable containing HTML tags in the tpl file, it shows the tags along with the content. This is how it looks in the PHP file: $content = "<h1>Header</h1>< ...

htmlvariablessmarty

Concealing visuals for smaller screens

I've been struggling to hide a specific image on my website for mobile devices. I've experimented with various combinations of HTML and CSS code, but I just can't seem to make it work. I suspect the issue might have something to do with my d ...

htmlcssmobile

Rearrange the position of one div to be placed next to another div and assign the float property

I have numerous divs located on my webpage, including .rightColumnBar and .divAttributes. HTML <div class="mainContent"> <div class="pageContent"> <form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" nam ...

javascriptjqueryhtmlcss

"Discover the proper method of referencing an iframe element from an HTML file using JavaScript

I am currently exploring the world of html and CSS, but now I am interested in delving into JavaScript, a topic I am completely unfamiliar with! My goal is to create a random button that displays a randomly selected embedded video (for example, from a poo ...

javascriptjqueryhtmlcssiframe

Implementing a Search Bar with Django and Bootstrap in the Navigation Bar

I recently added a search bar to the navigation menu. My intention was to enable users to input their search query directly into the search bar on the navigation menu and receive results when they hit the search button. However, I encountered an issue wher ...

pythonhtmldjangoformsbootstrap-4

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...

htmlcssangularjstypescriptbackticks

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

javascriptjqueryhtmlcssjquery-ui

Currently working on developing a Connect Four game and encountering an issue with the checkWin() function. It seems to be malfunctioning

Apologies in advance for adding to the flood of similar posts, but I believe my issue is quite straightforward. The current function under consideration, checkWin(), is not yet complete, but it operates on a list of columns containing jQuery objects and i ...

javascriptjqueryhtml

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

htmlcsslayout

I need to achieve success in a straight line, but my outcome is veering off course

I am looking for a specific outcome: https://i.sstatic.net/XUnrR.png This is the desired result: https://i.sstatic.net/XUnrR.png Utilizing Bootstrap version 4.4.1 attempting to use grids with no success <body> <div style="margin-left: 7 ...

htmlcssbootstrap-4frontend

The auto-complete feature is malfunctioning after retrieving input suggestions from a PHP file

My goal is to achieve the following: 1. Create a list of suggestions with same labels but different descriptions. 2. Upon selecting an item from the list, the input field of another item should change to the corresponding description of the selected item. ...

javascriptphpjqueryhtmlsql

troubles with downloading using the <a> tag

I attempted to create a personalized file name for user downloads, but I am having trouble using ${} in the process. My goal is: let foo = "name" let fileName = `${name}footer.html` <a download={filename} className="btn btn-info">Download</a> ...

htmlanchor

Creating Fixed/Sticky Headers for Tables within Tabs in Bootstrap 4

I'm working on a website using Bootstrap 4 and it features multiple tabs with different tables, some of which contain a large amount of data. I am looking to implement a feature where the table header remains fixed at the top of the page as the user s ...

htmlcssbootstrap-4

Using jQuery to choose options and change the background color

Hey there, I have a select box below: <select id="events"> <option value="1" style="background-color:green;">Event 1</option> <option value="2" style="background-color:yellow;">Event 2</option> <option value="3 ...

javascriptjqueryhtmlselect

Is it possible to position the Sprite image to the right of the anchor tag?

I have a CSS sprite image that is functioning correctly, but I am encountering an issue where the image is displaying on the left side of the anchor tag's text instead of the right. You can view the sprite image here. Expected result: [Mylinktext]&l ...

csscss-sprites

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

cssbootstrap-4

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. https://i.sstatic.net/O9OMi.png Th ...

htmlcssangularbootstrap-4bootstrap-5