Background image not showing on div element

As someone who is new to coding, I could really use some assistance with a problem I've encountered. Specifically, I'm attempting to reference an image within a div element, but unfortunately it's not displaying when I check through my browser.

I've been following a tutorial on this topic which can be found here: http://www.youtube.com/watch?v=j4kTLpezHDI&list=PL52E0F0A024E913AE.

CSS:

.banner {
   background: url(../img/city-bg.jpg) no-repeat;
    width: 695px;
    height: 271px;
}

HTML:

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Black + White</title>
    <link rel="stylesheet" type="text/css" "style.css">
</head>
<body>

<div class="container_12">
    <header>
    <h1>Black + White</h1>
    <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">How We Work</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Work Examples</a></li></ul>
    </nav>
    <div class="banner grid_10">
    <p>Some slick phrase would go in here to sum up what the business actually does and stands for.</p>
    </div>
    <div class="grid_2"></div>
</header>
<div class="main">
    <div class="grid_5">
        <h1>Services we offer</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p><a href="#" class="button">Read more</a></p>
    </div>
    <div class="grid_5">
        <h1>How we work</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p><a href="#" class="button">Read more</a></p>
    </div>
    <div class="grid_2">
        <blockquote>
            <p>Clean, elegant typography
            matched with sharp lines
            and precise spacing leads
            to a professional look
            and feel</p>
        </blockquote>
    </div>
</div>
<footer><p><strong>black+white themes via </strong><a href="http://themeforest.net">Themeforest</a></p></footer>
</div>

</body>
</html>

Answer №1

<link rel="stylesheet" type="text/css" "style.css">
--------------------------------------^------------

The correct syntax should include href:

<link rel="stylesheet" type="text/css" href="style.css">

For more information on HTML and CSS, check out starting with HTML + CSS

Answer №2

It seems like there might be a missing href in the link tag provided here.

I highly recommend utilizing browser inspection tools to identify and rectify errors similar to this one. These tools are user-friendly and can help troubleshoot various issues effectively. Take advantage of resources such as Firebug for Firefox, DragonFly for Opera, or Chrome's built-in tool to review the HTML code and ensure correct implementation. With these tools, you can also make real-time changes to HTML/JS/CSS elements for testing purposes. This practice is beneficial for web development tasks, allowing you to verify code execution in different browsers and experiment with modifications as needed.

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

Using PHP, HTML5, and AJAX to extract checkbox data from a contact form

Recently, I set up a PHP/AJAX contact form that successfully sends information like email addresses, names, and message texts to my inbox. However, I encountered an issue trying to include the checkbox values in the data sent to the form handler. Below is ...

When the React button is clicked, it displays a stylish blue border

Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !impo ...

How can I use Vue.js @scroll to create a dynamic CSS property?

I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps. <div @scroll="zoomOnScroll"> <Plotly :data="info" :layout="layout" :display-mode-bar="false"&g ...

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

In this particular scenario, my goal is to transform the content inside #fileDisplayArea into markdown format. However, I am encountering an issue where the HTML code within the div element is not being rendered. <div id="fileDisplayArea"># Title ...

Selectize-dropdown menu shines brightly as it opens upwards

In my sleek dashboard design, I have implemented a few dropdown menus using selectizeInput. These menus are currently positioned at the bottom of the page, but I want them to open in an upward direction instead of downward. While I found a workaround for ...

PHP: Parsing HTML Tables with Headers and Irregular Body Rows Using Simple HTML Dom Parser

In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...

Is there a way to position labels above their corresponding elements using this customized input style?

My CSS for styled inputs has become too complex, making it difficult to remove and fix certain elements. Specifically, I am facing issues in getting labels positioned above my input fields, select options, and output section. /* Cus ...

RegEx for capturing targeted content within HTML elements

I am in need of developing a Python program that takes an HTML file from the standard input, then outputs the names of species listed under Mammals to the standard output line by line utilizing regular expressions. Additionally, I am instructed not to incl ...

Modify a website link using Javascript by detecting two separate button clicks

I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...

Angular styling for input elements that are in the pristine state

Hey there, I'm working with a CSS class that applies a red border to an input field when it is required and invalid, and changes to green when it becomes valid. CSS .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green ...

After a two-second period of inactivity, the buttons on the item should trigger an action

I have a scenario in mind that I want to implement: When the user clicks on either the "Plus" or "Minus" button. If the user doesn't click on any of those buttons within 2 seconds, then we assume that the current quantity should be sent to the server ...

The challenge of resizing images using Chrome Print CSS

I have a unique method for centering an oversized image within its container. Everything works flawlessly, except when attempting to print in Chrome (printing in FF and IE behaves as expected). In Chrome's print preview, the image does not resize at a ...

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

To view the following set of three images, simply click on the "load more" button

I'm looking to add a load more button to reveal additional images. Currently, the page loads with 3 images visible, and upon clicking the load more button, the next set of 3 images should be displayed on the screen. Unfortunately, the code I've ...

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Today, I decided to write a basic Python script utilizing Selenium that would identify an element by its Css selector. My target? The input field on the Google webpage, specified by input[name=q] Upon running the script, Chrome opened as expected but prom ...

Replacing an array in Perl with the contents of a SQL database: A step-by-step guide

Update: (Check Revised Code at the bottom) The code is now functioning properly to retrieve data from 2 databases with some additional cleaning required. However, I'm facing a challenge where the code previously used: next unless $currentuser ~~ @las ...

Dropdown menu in Bootstrap gets cropped behind a scrollable container

I am encountering a problem with my Bootstrap Drop Down. The dropdown is located within a scrollable div with a fixed height. Whenever I click on the dropdown, the menu appears behind the scroll content. However, a normal select works perfectly fine. htt ...

What is the best way to ensure that all inner divs occupy the full height of their parent div?

I am seeking a solution to make all child divs fill the full height of the parent div without specifying a fixed height. Ideally, I would like them to adjust to the height of the tallest child div. However, if the only way to achieve this is through JS, I ...