The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself.

<!DOCTYPE HTML>
<html>
<head>
<title>iDeas.com</title>
 <link rel="stylesheet" href="css/uikit.min.css"/>
 <link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
     <script src="js/jquery.js"></script>
     <script src="js/uikit.min.js"></script>
</head>;

<body background="background.jpg" style="font-family: 'Dosis', sans-serif;">
<div id="main_container" >
<div id="sub_container">
<div id="header_container">
<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
</div>
<div id="body_container">
<div id="form_container">
<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
<form autocomplete="off" method="post">
<div class="uk-form-row">
<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
</div>
<div class="uk-form-row">
<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
</div>
<div class="uk-form-row">
<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
</div><br><br>
<div class="uk-form-row">
&nbsp;Don't have an account..? Register <a href="">Here</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="footer_container">
</div>
</div>
</div>
</body>
</html>
I've ensured that the image is in the same folder without any subdirectories. I even tried using inline style "background:url(...)" but it didn't work. I'm confused as to why it's not working, especially since it worked on another page called test.php with the same image directory and being in the same folder without any issues.

htmlcss

Answer №1

When you specify <!DOCTYPE HTML>, you are instructing browsers to render your page using HTML5. It's important to note that the background attribute was deprecated in HTML4 and is no longer supported in HTML5.

The recommended approach is to use CSS instead:

body {
    background: url(background.jpg);
}

You can include this CSS either inline within the style element in the <head> section of your webpage:

<style type="text/css">
    /* Your CSS goes here. */
</style>

Alternatively, you can create a separate stylesheet file (e.g., .css) and link it to your page using the <link> element:

<link rel="stylesheet" href="myStylesheet.css">

Example

body {
  background: url(http://placehold.it/64x64);
}

If you still prefer to use inline styling, you can utilize the HTML style attribute. However, it is generally considered poor practice as maintaining a separate CSS file is easier and more organized:

<body style="background: background.jpg">
    ...
</body>

Answer №2

If you want to set an image as the background using the <body> tag, you can achieve it by following this syntax:

<body style="background-image:">

Answer №3

No need to modify the uikit css file, you can simply craft your own .css and link it in your html document.

If you are facing issues with the background not showing up, you might try using 

<html class='uk-height-1-1'>
and 
<body class='uk-height-1-1'>

Answer №4

<!DOCTYPE HTML>
<html>
<head>
<title>iDeas.com</title>
 <link rel="stylesheet" href="css/uikit.min.css"/>
 <link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
     <script src="js/jquery.js"></script>
     <script src="js/uikit.min.js"></script>
</head>

<body  style="font-family: 'Dosis', sans-serif;background:url(http://www.h3dwallpapers.com/wp-content/uploads/2014/11/Plain_Background_06.jpg)">
<div id="main_container" >
<div id="sub_container">
<div id="header_container">
<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
</div>
<div id="body_container">
<div id="form_container">
<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
<form autocomplete="off" method="post">
<div class="uk-form-row">
<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
</div>
<div class="uk-form-row">
<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;">&nbsp</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
</div>
<div class="uk-form-row">
<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
</div><br><br>
<div class="uk-form-row">
&nbsp;Don't have an account... Register <a href="">Here</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="footer_container">
</div>
</div>
</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 Node.js application is unable to locate the source file path

Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...

javascripthtmlnode.jsmongodbexpress

Using Vue and vue-multiselect to create interactive options based on the selected language

I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...

javascripthtmlvue.jsvuejs2vue-multiselect

``Do not forget to close the modal window by clicking outside of it or

I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...

javascriptjqueryhtmlcss

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

csshtmlvertical-alignment

What is the best way to modify the appearance of the button?

I'm attempting to change the appearance of buttons at the top of a webpage to be square and blue. I have jQuery code for this purpose, but it doesn't seem to be functioning correctly. Here is the snippet of code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcssdom

VUE component disregarding CSS styles

Check out my awesome VUE component below: <template> <div> <div class="bottom-footer"> {{msg}} </div> </div> </template> <script> export default { ...

cssvue.js

Tips for incorporating automatic line breaks and setting a maximum column width in a table

Is there a way to set different maximum widths for table columns and enable automatic line breaks when entering text into the columns? Below is the code snippet I currently have: echo "<table border='1' cellpadding='10'>"; echo ...

phphtmlhtml-tablewidth

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

javascripthtmlcss

Retrieve the matrix3d values from the -webkit-transform property

My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...

javascripthtmlgraphicscss3d

Aligning hyperlinks with background images

Trying to align the link with the background image centered but it keeps ending up at the top, even though I specified the sizes and each background image has different dimensions. https://i.sstatic.net/HMdMx.png HTML <section> <h3> ...

css

What is the best way to make sure the embedded object fills the entire height of the container div?

I am currently using angular2/4 along with angular-material (https://material.angular.io/). My challenge lies in trying to embed a PDF within it. The issue I am facing is that the height of the PDF object seems to be small and doesn't fully occupy the ...

htmlcssangular

JavaScript (geolocation) error: Unhandled TypeError - Invocation not allowed

Encountering the Javascript error "Uncaught TypeError: Illegal invocation" while executing the code var nativeGeoloation = window.navigator.geolocation.getCurrentPosition; nativeGeoloation(function (){ alert("ok")}); Despite attempting to call the code w ...

javascripthtmlcordovageolocation

In certain browsers, the link changes color to white

As I assist my brother in setting up a website for his business, we encountered an issue. In some browsers, hyperlinks appear as white and therefore invisible. Interestingly, the hyperlink is white in Firefox, but not when browsing in incognito mode, see t ...

htmlcss

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

javascriptjqueryhtmljsonobject

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs

How can I make the Struts2 iterator function correctly?

Using the Struts2 <iterator> tag in a JSP to display values, the method is being called but no results are appearing on the page. All the necessary data is printing in the console, but not in the JSP itself. The call made is localhost\listAddCo ...

javahtmljspstruts2

The Asp button fails to initiate the function

One area of concern I have is with the signup page for my project, particularly regarding the following code: <input type="email" id="email" title="invalid email!" runat="server" placeholder="email" /> ...

c#htmlasp.netweb

Creating a CSS layout with tabs that include a visually appealing right space

My webpage is set up for tabbed browsing, with the tabs displayed as <li>s in block form. The parent div containing the tabs is floated to the right. However, I am encountering an issue where the last tab is not fully aligning with the right side of ...

css

Reorganizing the layout of grid items

Currently, I am working on a task involving GRID CSS. The main objective of the task is to utilize GRID specifically, rather than other methods like flex. I have successfully set up two columns in my GRID, each with its own divs. However, what I am struggl ...

htmlcssgridcss-grid

Condense everything when displaying one at a time (various divs)

I found the solution at https://getbootstrap.com/docs/4.2/components/collapse/ My query is related to collapsing multiple elements and showing only one when divided into different divs. While it works within the same div, dividing content into separate di ...

cssbootstrap-4accordion