Tips for implementing an external CSS file to set a background image in gedit

Even though I am enrolled in HTML and CSS classes, one aspect of external CSS that continues to baffle me is how to create a background image. I can successfully implement external css in other ways, but incorporating a background image has proven to be challenging for me.

Below is the HTML code I have been using:


<!DOCTYPE html>
<html lang="en>
<head>

<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/CSS/forms.css">
</head>
<body>
<div id="Pictures"</div>
</body>
</html>

Here is the snippet from my CSS file:

#Pictures {
    background-image:url(../home/brian/Desktop/Becky.JPG);
}

While I can make it work by using the <style> tag within the HTML document, the challenge lies in implementing it through an external CSS file.

cssbackground-image

Answer №1

Organizing your files properly is crucial. Have you considered the location of your .html file in relation to your .jpg file?

I recommend creating a separate folder, such as 'assets' or 'images', to store your images instead of keeping them on your Desktop.
So, your file structure would appear like this:

index.html
css/style.css
assets/Becky.jpg

The path in your external css file should then be:

#Pictures {
  background-image: url(../assets/Becky.jpg);
}

Answer №2

#images {
  background: url("http://www.example.com/image.jpg");
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding-top: 60px;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Website Design</title>
  <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css">
</head>

<body>
  <div id="images"></div>
</body>

</html>

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

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

cssiphoneipadmenuprestashop

What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...

htmlcssweb-frontend

Creating formulas in Javascript to determine the appropriate width of an image based on its original dimensions using a percentage scale

I'm struggling to grasp this concept, it seems really basic. I need to set the image width in percentage similar to a CSS file, but I'm not sure of the method or technique to achieve this. For example... //I attempted this approach but it did ...

javascriptphpjqueryhtmlcss

What could be causing the issue of my CSS file not properly linking in my HTML file?

Recently, I created an HTML file that contains the following code... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sca ...

htmlcss

Tips for eliminating the margin in a bootstrap navigation bar when hovering?

Here is the Navigation Bar that I customized, along with the CSS code I used to override the Bootstrap styling. Below are images showing the current output and the expected output. <div class="row fixed-top"> <div class="col-md-1"></div> ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...

htmlcss

Is there a way to automatically resize the images on my navbar as the screen size decreases?

Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...

htmlcssnavbar

What could be causing the CSS transforms to not show up on the page?

Can't seem to get my navigation panel to slide in when the nav button in the main menu is clicked. I've done this before without issues, so not sure what's up. Any help? Custom HTML Code <!-- Header --> <div class="header"> & ...

javascriptjqueryhtmlcsscss-transitions

What steps can I take to create a fixed footer using CSS Flexbox?

"How can I make the footer stay at the bottom of the page" I've encountered challenges with footers in the past and have struggled to achieve the desired outcome. Is there a straightforward method to create a fixed footer using CSS Flexbox ...

cssflexbox

Inaccurate Placement of Navigation Tool Tip

I added some custom tooltip arrows to my navigation menu. They appear when you hover over the menu items, but strangely they also show up at the bottom of the drop-down. I'm curious about which piece of code is causing this behavior! Below is the cod ...

htmlcsswordpressnavigationtooltip

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it. I have tried moving the buttons section around to troubleshoot, and it does s ...

htmlcssbootstrap-4

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

javascripthtmlcsstinymcetinymce-4

How can I use JavaScript to modify the style of the first unordered list (ul) element without affecting the

function displayMenu(){ var parentElement = document.getElementById("menuItem1"); var lis = parentElement.getElementsByTagName("ul"); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute("style","display: block"); } } When the button is clicke ...

javascripthtmlcss

Creating a modal popup when a button is clicked

After searching online for a way to make my sign up modal pop up when the signup button in my navbar is pressed, I was unable to find any information on how to achieve this. I suspect it involves JavaScript, but my knowledge of JS is limited. I attempted ...

javascripthtmlcssbootstrap-5

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

javascriptcssajaxasp.net-mvc

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss

Uniform design across various phone screen sizes achieved using JQuery Mobile framework

When I use phone with different screen resolutions, the layout appears differently. Desired Outcome Result when resolution is increased Is there a simple way to make it scale proportionally using JQuery Mobile? ...

androidjquerycssjquery-mobilecordova

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

sticky navigation causing issues with tab functionality

Currently in the process of developing a website with a rather intricate sticky navigation bar. The JavaScript code being utilized to achieve this functionality is as follows: // Code for creating a sticky navigation bar document.addEventListener("s ...

javascripthtmlcsstabs