What is the best way to position a background image at the top of a div without overlapping the

I have this HTML code:

<div class="page">
        <div id="header">
            ...
        </div>
</div>

Below is my CSS:

.page {
    width: 1028px;
    background-color:#103250;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    background:url('/Img/SubpageBox1.png') no-repeat top;
    height:150px;
    padding-top:50px;
}

The issue I am facing is that the background-image is appearing outside of the div, at the top of the page. How can I properly position it at the top of the header?

htmlcss

Answer №1

If you want to define where the background image is located:

background:url('/Img/SubpageBox1.png') no-repeat center 50px;

You can also use the background-position CSS property.

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

Tips for accessing a local file on a website through HTML - easy steps to follow!

Is it possible to open a local (jpg or pdf) file from a random website that is not under my control? I have tried editing the HTML code of a site in Chrome by replacing existing links with ones linking to my local file, but when I click on them, nothing ha ...

htmlgoogle-chromelocal

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

jquerycsseventsjquery-ui

Using CSS to Showcase the Art Gallery Page

This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...

htmlcsstwitter-bootstrapbootstrap-4

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Utilizing Next.js Image Component to Apply CSS for Width and Height Settings

Currently, I am utilizing the Image component provided by Next.js, which requires setting specific width and height values. To address this, I am incorporating Tailwind CSS utility classes to establish the desired dimensions. <Image src={imageSr ...

htmlcssimagenext.jstailwind-css

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

I would greatly appreciate your assistance in resolving the issue I am facing. I have been trying to navigate from one view to another, but when I use an <a> tag nested within a <mat-sidenav>, I encounter the following error: "Uncaught (in prom ...

javascripthtmlangular

Is there a way to showcase Laravel images on a live server efficiently?

After successfully developing a Laravel app on my local machine, complete with visible images, I encountered an issue upon deployment to the live server where the images were no longer displaying. My hosting setup involves a 'public_html' folder ...

phphtmllaravel

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

I recently downloaded the most recent version of Bootstrap, which is version 4. Upon extraction, I noticed that it includes two folders: one for CSS and the other for JS. The CSS folder consists of approximately 12 CSS files, while the JS folder contains ...

javascriptcssbootstrap-4bootstrap-modal

Retrieve the value of the textarea only if it exceeds 15 characters

Could you please explain why in this example: <div id="comment-form"> <h3>Comment on this story:</h3> <form method="post" id="story-comment-form" action="#"> <textarea name="comment" id="story-comment-text"></textarea& ...

jqueryhtmltextarea

Tips for ensuring math formulas display correctly in CKEditor

I'm currently struggling to properly display the correct format of a math formula in ckeditor. I have made numerous attempts to find a solution, but so far, none have been successful. Here is an excerpt of my code: <html> <head> <scr ...

javascriptjqueryhtmljquery-ui

PHP MySQL query is causing multiple rows to be updated in the database

My goal is to update the quantity and price in two tables: Invoice and Order_Table. The updates should only apply to a specific OrderID. Here's my attempt: $UpdateQuant = "UPDATE Order_Table SET Quantity = '$NewQuant' WHERE OrderID = ' ...

phphtmlmysqldatabase

Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which als ...

javascripthtmlcsspaypalopencart2.x

Using Node.js and the Jade templating engine, display the value of a passed variable

Asking such a basic question makes me feel guilty. app.get('/skumanagement/:id', function (req, res){ var options = req.params.id; // req.params.id = itemidx database.skuGetDetail(options, function (error, data){ winston.log('inf ...

javascripthtmlnode.jsexpresspug

The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...

javascriptcss

Is it possible to create a dynamic <hr /> using Flexbox?

In the midst of working on my application, I managed to achieve a simple layout. However, there is one peculiar requirement that has been eluding me for the past 2 days and now I find myself in need of assistance. Here is the current HTML code I am workin ...

javascripthtmlcssangularflexbox

CSS class for modifying color based on certain conditions

Suppose I have this CSS code: label { color: #AAAAAA; } Can I modify it to include a condition that changes the color to red if the label has the "error" class? I am aware that I can dynamically add the class to the label in HTML, but I am curious if ...

htmlcss

Make sure to close all your tags properly in PHP

Within my <textarea>, I am giving users the ability to submit content. The specific tags I want to allow include <b>, <i>,<blockquote>, and <del>. In order to prevent any unclosed tags since this content will be displayed on t ...

phphtml

CKEditor is removing tags and attributes when formatting HTML emails

I have developed an application that enables users to import HTML emails and make adjustments before forwarding them. I am attempting to utilize CKEditor for modifying the imported email; however, it appears to be removing bgcolor tags (and possibly more). ...

htmlckeditorhtml-email