Assistance is needed in creating a compact HTML website

I've designed a small PSD Mockup of an about page for my website. However, I lack the knowledge to code in HTML and CSS.

Here is the current code snippet:

index.html

<html>
<link rel=StyleSheet href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id=body>
</div>
<div id=header>
<h3><font title=Futura>Header</font></h3>
</div>
</body>

css.css

body {
  background-image: url("background.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
header {
    background-image: url("otherBackground.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

I want to overlay the background image of the header on top of the body's background image and then add some text on top.

Is there a way to achieve this effect?

Answer №1

To master this situation, it's essential to embrace nesting and grasp the overall flow of a document. You have the ability and are encouraged to nest HTML elements within other HTML elements to create a parent::child hierarchy and dictate the positioning of elements on your webpage. Take note of how I repositioned the header element inside the body div.

<html>
<link rel="StyleSheet" href="styles.css"
type="text/css">
<head><title>My Title</title></head>
<body>
<div id="main-body">
<div id="page-header">
<h3><font title="Futura">Page Header</font></h3>
</div>
</div>

</body>

Additionally, remember to enclose your element attributes in quotation marks. In your CSS, when targeting a div, make sure to prefix the element name with a #.

You're off to a good start, but keep exploring tutorials - you'll soon become proficient!

Answer №2

Make sure to include the hashtag symbol (#) before "header"

#header { }

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 timeline aesthetic can be achieved solely through the use of HTML, CSS, and potentially some Bootstrap functionalities

https://i.sstatic.net/EsDAE.png Up to this point, I've only been able to make it this far. I'm using a sample code from w3school https://i.sstatic.net/G1FcQ.png I've been attempting to get the year in the same position as in the image, bu ...

The alignment of CSS boxes at the top is off

My challenge is to stack 3 containers horizontally, but they have different heights and the smaller ones end up at the bottom. How can I resolve this issue? This is the code snippet I am currently using for the boxes: .brand{ border: 1px solid black; bor ...

Show the elements of an array within a div when a button is clicked, utilizing pure vanilla JavaScript

I'm looking for help with printing the elements of an array onto a div element. Can anyone provide some guidance? var myArray=["stone","paper","scissors"] <button onclick="printnumbers()"></button> <div id="result"> </div> ...

Implementing a loop with jQuery in a React application

I encountered an error stating that the i is not defined, even though I have already initialized the npm install jQuery and imported it. Here is a screenshot of the error: https://i.sstatic.net/SV8Ww.png This is my code snippet: isClick ...

Page refresh enhances hover effect style

Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...

Locate a Sub-Child href Element using Selenium

I am attempting to interact with a link using Selenium automation tool. <div id="RECORD_2" class="search-results-item"> <a hasautosubmit="true" oncontextmenu="javascript:return IsAllowedRightClick(this);" class="smallV110" href="#;cacheurl ...

Display only the selected data by default with the Django CheckboxSelectMultiple widget

Hey there, I'm looking for a way to display only selected data associated with my model_A model's user field in the form by default. Instead of listing all entries from the User model, I want to show only the data linked to model_A. My goal is to ...

A web address shared in a post appears within the nested frame of an iframe

I'm encountering a somewhat confusing issue. I am attempting to submit a URL to an iframe located on the same page. Upon clicking submit, the iframe replicates the current page, but with the correct URL displayed in the duplicated iframe. It's ma ...

Turn off the autofill option for passwords in Google Chrome

Is there a way to prevent the password autocomplete dropdown from appearing when clicking on the password field? In Chrome Version 61.0.3163.100, none of the solutions seem to be working. Screenshot This issue has been raised many times, but setting autoc ...

The Google Maps V3 API map is not loading completely

I'm currently in the process of developing an application that will display maps showcasing local dining establishments. Although the map does appear, it's taking an excessively long time to load and never fully loads as expected. My deadline i ...

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

Adjust the column width dynamically in an Ionic framework

Need help with changing the size of a Column element dynamically. <ion-col [size]="this.size" [size-xl]="this.size_xl" [size-md]="this.size_md" [size-sm]="this.size_sm" [size-xs]="this.size_xs"> Faci ...

information directed towards particular positions on a meter

I am in the process of creating a dashboard skin that receives data from a game via a plugin. I have encountered a problem with the RPM gauge. The issue is that the angle from 0 to 5 on the gauge is smaller than the angle from 5 to 10. I am attempting to s ...

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

Update the appearance based on the dimensions of the parent container with Bootstrap

Here's the situation I'm facing on my webpage: <div id="myDiv"> <p>A</p> <p>B</p> </div> If 'myDiv' is narrower than width X, display A & B vertically. Otherwise, display A and B horizo ...

Incorporate dynamic classes into an HTML list using PHP

I'm struggling to assign consecutive classes to each list item in a list with the 'nav' class. My goal is to give each list item a class of 'nthChild-x', where x corresponds to its position in the list. I'm pretty new to PHP, ...

What is the best way to implement a media query for changing styles on hover for an element

I am facing an issue with media queries where when I apply a hover effect to an element, such as a clickable link in the navigation bar, the new rules work as expected but also retain the default browser styles. For instance: nav ul li a:hover{ border:0; ...

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

How to customize the background of radio buttons in HTML

I want the background color to stay consistent as lightgray for each <ul>. Currently, clicking the radio button causes the ul's background to change incorrectly. I am unsure of how to loop through all available ul elements using jQuery and woul ...

How can I horizontally center an element in CSS/HTML if auto-margin does not produce the desired result?

This is a snippet of the CSS code I'm using for my menu: ul { text-align: left; display: inline; margin: auto; width: 50%; position: fixed; top: 0; list-style: none; } I've attempted to use auto-margin left and right ...