CSS background image that will not be affected by padding-top

Is there a way to make a background image override the top padding on the first section of a website? I have set padding-top to separate the first title from the navbar, but now I want the background image to take precedence.

Thank you!

Using HTML:

<nav>
    <a href="#getting-his-start"><b>Getting his Start</b></a>&nbsp;&nbsp;
    <a href="#cinematic-revolution"><b>Cinematic Revolution</b></a>&nbsp;&nbsp;
    <a href="#experimental-phase"><b>The Experimental Phase</b></a>&nbsp;&nbsp;
    <a href="#logos-made-to-last"><b>Logos Made to Last</b></a>&nbsp;&nbsp;
    <a href="#the-next-big-thing"><b>The Next Big Thing</b></a>&nbsp;&nbsp;
    <a href="#his-influence-today"><b>His Influence Today</b></a>&nbsp;&nbsp;
</nav>

<section class="start">
    <h2 id="getting-his-start">Getting his Start</h2>

Applying background image CSS:

.start {
    background-image: url(../images/goldenarmamend.png);
    background-position: top right;
    height: 100%vh;
    width: 100%vw;

Adjusting CSS for h3 spacing:

h3 {
    font-size: 1.5em;
    margin-top: 3em;
    margin-bottom: 0.7em;
    text-transform: uppercase;

Answer №1

To achieve the desired result, consider using a margin-top instead of padding-top and adjusting the title position by applying a negative margin-top. Providing a code snippet for that specific section would enable a more precise solution.

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

I'm having trouble with Bootstrap 4 where my fixed navbar won't stay separate from my jumbotron

Currently working on a website and utilizing Bootstrap. Looking to keep my fixed navbar distinct from my jumbotron, but struggling to achieve separation between the two. Is there a method to accomplish this without directly modifying the CSS file? Here i ...

Custom CSS styles for purchasing stocks using percentages

Can someone assist me in fixing the CSS for this custom card within a modal box? <!--Card--> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <input type="text" id="market-searc ...

"Adjusting the Height of an MUI Autocomplete Input Field: A Simple Guide

I've been attempting to shrink the size of the Input field in MUI autocomplete but haven't had any luck. Here's the code I tried: styling: autocompleteStyle: { height: '2.3rem', color: `${theme.palette.grayDark1} !important ...

Issue with Bootstrap NavBar collapsing properly on first element

I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

Creating thumbnails with ffmpeg from a live stream in a Node.js environment

Utilizing node.js alongside ffmpeg to capture an rtmp-stream and convert it into m3u8 format. [ '-y', '-fflags', 'nobuffer', '-analyzeduration', '1000000', '-i', 'rtmp://localho ...

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

Tips for eliminating the draggable item's shadow in Angular

Is there a way to remove the shadow seen under the backdrop when dragging an item in the Bootstrap modal dialog? In the image provided, I am trying to drag the "Personal Details" button..https://i.stack.imgur.com/uSNWD.png ...

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line. Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line i ...

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

Eliminate Bootstrap's styling from HTML characters

The default heavy checkmark (✔) appears as "✔" Bootstrap 4.3 seems to be altering the appearance of the check, causing it to display as a thick-green one, which is not what I prefer -- see example below I want to remove Bootstrap's styli ...

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

The hover effect in CSS brings life to list items when filled with content

I am attempting to create an animation for an <li> element that gives the illusion of a fill effect moving from left to right when hovered over. This is my current progress: ul { list-style-type: none; } .hoverTest { float: left; margin-right: 1 ...

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

After implementing a logic in the application, the gradient is now changing dynamically. <template> <div :style="`background-image: ${backgroundImage}`" class="background"> <snackbar /> <nuxt /> <default-footer /&g ...

Loading textures locally using three.js is functioning properly, however, remote loading is not functioning as

I have customized an official example for the Loader object to showcase a specific issue. My goal is to generate a mesh with a texture map that loads before creating the geometry. Currently, I am facing a problem where local files load properly, but remote ...

The navbar background spans the full width of the screen, with all content contained within minimum and maximum width parameters

Currently, I am working on a fluid website design where I have set specific min-width and max-width values. However, I want the navigation bar background to extend across the entire screen width without being limited by the max width parameter, while still ...

A minuscule variation in width percentage due to a single pixel

I am experiencing an issue with a one pixel margin between two green colors on my website. I have been unable to locate the source of this problem. I am currently using display:inline-block. Here is the link to my website: ...

Scroll along the menu smoothly, without causing any disruptions to the rest of the page

I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down. If this description isn&apos ...