Background image remains unaffected by HTML

I'm looking to update the look of a website by changing the background color to a picture. The CSS code I am using is as follows:

.bg {
    opacity: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
    background-image: url('../../assets/pics/bg.jpg');
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

When I add <body class="bg"> to the HTML file, the website displays as white. However, if I include an image with 

<img id="logo" src="path to img">
, it works fine. I prefer using CSS for this because it's more efficient. The image path in the CSS file is:

../../assets/pics/bg.jpg

There are no errors shown in Chrome Developer Tools. Can someone assist me with this issue?

(For reference, I am working on editing the page "mcggehrden.de/idesk/v3" and aiming to set a custom background.)

htmlcssimagecolors

Answer №1

Are you looking for something similar to this?: View Full Size

<div class="container">
 <div class="row text-center">
    <div class="col-md-3 col-md-offset-5">
        <h1>MCG Gehrden</h1>
         <form class="login-form" action="/idesk/v3/login_check" method="post">
  <h3><span class="glyphicon glyphicon-user"></span> IServ-Anmeldung</h3>
        <input class="form-control" type="text" name="_username" value="" placeholder="Account" required="required" autofocus="autofocus"/>
  <input class="form-control" type="password" name="_password" placeholder="Passwort" required="required" />
   <div class="checkbox">
     <label><input type="checkbox" id="remember_me" name="_remember_me" /> Angemeldet bleiben</label>
   </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit">Anmelden</button>
</form>
    </div>
</div>

CSS:

*{ padding: 0; margin: 0; }
body {
 color: white;
background: 
    url(https://mcggehrden.de/idesk/v3/img/logo.png) 100% 60vh no-repeat,
url(https://mcggehrden.de/idesk/v3/img/circles.png) 0px 100px no-repeat, 
    #244c7f ;          
} 
form{
    background-color: white;
    padding: 20px;
}

Answer №2

When applying styling to an image within the body using CSS, there is no need to assign a specific class to the "body" element. Instead, you can directly target the body tag by specifying styles with body {..your styles..}. Additionally, rather than setting individual properties for top, left, right, and bottom, it is more efficient to simply use margin: 0. It is important to note that using position absolute may not be necessary in this case, and an opacity of 5 would not create a visible effect. Setting a z-index of 5 without other relevant elements would have no impact. I recommend setting a width of 100% and either height:auto or a specified height in pixels (px). Feel free to give this approach a try and share your feedback.

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

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

What is the process for adjusting settings through selected options in a pop-up menu?

Here are the choices available: <form> <select id="poSelect" > <option selected disabled>Choose here</option> <option id="buyeroption" value="100101">I am a Buyer</option> ...

javascriptjqueryhtmlcss

What exactly happened to my buttons when I transition to the mobile display?

Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...

javascriptphphtmlcss

Artboard: Easily navigate through pictures

As part of a school assignment, I wanted to create an interactive story where users can click through images using the UP and DOWN buttons. However, I am facing an issue with my If function overriding the previous function. I envision this project to be a ...

javascripthtmlimagecanvaskeyevent

Button Click Does Not Trigger Bootstrap Modal Display

This is a sample Bootstrap document that includes JS and CSS files to display a list properly in Bootstrap. However, the Modal does not appear when clicking on Launch demo modal. No JavaScript errors are displayed in the Console. Can you help troubleshoot ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Display the same DIV element across various HTML tabs

When two different tabs are clicked, I need to display a set of 10 Search Fields. Both tabs have the same fields, so instead of using separate DIVs, I want to use the same DIV and only change the AJAX REST End-Point based on the selected TAB. Can someone ...

javascriptjqueryhtmlajaxtabs

Unable to Retrieve Data in Dropdown Using MySQLi Query

Currently, I have a simple data entry form working well. However, someone recently asked me if I could change the 'name' field to a drop-down list of users instead of manually entering names and potentially making spelling mistakes - which actual ...

phphtml

Adjusting the arrangement of elements based on the size of the screen

Two floating <div>'s are styled with classes .a and .b. Both <div>'s are floated to the left, each taking up 50% of the width, aligning them horizontally. On smaller screens, I want both <div>'s to be aligned vertically. ...

htmlcss-floatcss-position

Using v-if within v-for to showcase a list of items in a dual-column format

I apologize for reiterating this, as I have noticed that many questions similar to mine have been asked multiple times. Here are the ones that almost helped me and why they fell short: This specific question advised against performing calculations within ...

cssvue.jsvuejs2

Uploading files in parts within an AWS Lambda function

Looking for advice on implementing a multipart file upload within a Lambda function triggered by an S3 bucket image upload event. I need to retrieve the uploaded image and then forward it to another API service. Any guidance or recommendations would be g ...

node.jsamazon-web-servicesimageamazon-s3aws-lambda

Ensure that the footer remains at the bottom of the webpage, without being positioned as fixed

I am encountering an issue on my work2 Website where the footer is not staying at the bottom of the page when there is limited content. I have searched extensively on Google, YouTube, and CSS tricks for a solution, but have not found one that works for my ...

htmlcss

First child CSS selector, excluding siblings

Is there a way to target only the initial occurrence of an element without affecting any nested elements? I specifically want to single out the first ul element within the #menu container, without selecting any children or descendants. For instance, using ...

csscss-selectors

Database not receiving input data from AngularJS form submission

Having some trouble saving form data to the database using angularjs. Not sure what I'm doing wrong. Here's my HTML form: <form id="challenge_form" class="row" > <input type="text" placeholder="Challenge Name" ng-model="ch ...

javascripthtmlangularjs

Encountering difficulty loading a Laravel project due to an error

I encountered an issue with the master.blade.php file located in the views folder. The error message reads as follows: *<br/>ParseError <br/>syntax error, unexpected '{', expecting ')' (View: E:\soft\Xampp2\h ...

javascriptphphtmlcsslaravel

Is there a way for my box to avoid reaching the bottom of the page?

Is there a way to prevent my box from reaching the bottom of the page? I am currently using Bootstrap 4 and have tried the spacing utilities, but they don't seem to be effective. https://i.sstatic.net/YRqb4.png Attached is a picture showing that the ...

htmlcsstwitter-bootstrapbootstrap-4

What is the most effective way to align Django form CharFields side by side on a single line?

Currently, I am utilizing the Django Form class to construct a form. My goal is to have each CharField field occupy its own row, with the exception of certain ones that I want to share a row. The following are the CharFields I am currently working with: c ...

pythonhtmlcssdjangoforms

The navigation on my mobile collapses whenever I use the Hello bar app

I am facing a problem with my Shopify theme. I recently installed an app called "Hello Bar" to show offers on all pages, but it seems to be incompatible with my theme. The developers of the app suggested adding the following code to my CSS file: @media ...

javascriptjquerycssshopify

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

javascripthtmljson

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image

When I click on my Material UI avatar image, it seems to override the button I had in

Every time I try to create a basic category filter with images, I encounter a frustrating bug. After examining the console log, it seems that when I click on the button, my image is being clicked and behaving like an image. However, when I click around the ...

htmluser-interfacematerial-uinext.js