Is there a way to set a background image in a section without being affected

I'm struggling to make my background image for the first section of my website touch the navigation bar. The theme of the design requires that the arm in the background image reach all the way up to the nav bar. Check out the background image here

The first section begins with a heading (h3) which has some padding-top applied to it:

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

I want the background to overlap the padding, so there is no gap between it and the navbar.

Here's the CSS for the background image:

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

I hope this clarifies things!

cssbackground-imagenavbarpadding

Answer №1

Adjusting background positioning...

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

Customize the 'right' value to suit your design in pixels or em.

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

Is it possible to implement an automatic scrolling functionality in this code snippet?

https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0110 Stumbled upon some interesting code to tinker with and came across this piece. Attempted to search online for solutions, but my grasp on React (or maybe Java?) is close to zero. Tried following guid ...

javascripthtmlcssreactjs

What is the best way to utilize multiple props within a single callback function declared in a template literal when using React styled-components?

I recently incorporated styled components into my React project, but I'm encountering difficulty using multiple props to define styles in my components. Here's the crux of the problem: const sizes = { lg: css` width: 200px; h ...

javascriptcssreactjsstyled-components

Having trouble navigating to the bottom of a VUEJS app?

I've been working on developing a chatbot app that utilizes a REST API to stream content. While the functionality of the app is running smoothly, I have encountered an issue with the scroll to bottom feature. Instead of automatically scrolling to disp ...

javascripthtmlcssvue.js

Transitioning the width in CSS without using the "auto"

Currently, I am experiencing a problem with my CSS animation that is leaping directly from the start to finish. It appears to be connected to a similar issue addressed in this thread. My inquiry is: Is there a way to create a smooth transition in width f ...

csswidthcss-transitions

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...

javascripthtmlcss

Eliminating border styles alters the overall appearance of the page

I'm encountering an issue with my HTML/CSS code here: CSS * { padding: 0; margin: 0; border: none; outline: none; } #container { margin: 10px auto 10px auto; width: 960px; background-color: #dddddd; border: solid 1px black; } #contai ...

htmlcss

Interactive carousel featuring responsive image zoom effect on hover

Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented: CSS .image-hoover { overflow: hidden; } .image-hoover img { -moz-transform: scale(1.02); -web ...

javascriptjquerycsscss-transitionscarousel

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to resize tables in IE when using CSS Flex layout

Having a bit of trouble with the flex layout. I've put together a FIDDLE project where when resizing the output box, table cells will align one to one beneath each other. It seems to work fine in Chrome and Firefox but not in IE when using table eleme ...

htmlcss

Material-UI Grid in Full Width Mode is malfunctioning

I've been delving into the Material-UI@next grid layout system to grasp its intricacies. What I'm aiming for is to have two papers that stretch across the entire width of the screen and collapse into one paper when the screen size shrinks. The d ...

cssreactjsmaterial-designmaterial-ui

Steps for modifying an element in an array using Javascript

Currently, I am a beginner in the realm of JavaScript and I am trying to build a todo-style application. So far, I have successfully managed to create, display, and delete items from an array. However, I am facing challenges when it comes to editing these ...

javascripthtmlcssarrays

Is it possible to swap two classes with each other using jQuery?

I am trying to implement a tree view with the following code snippet. Within the tree view, there are spans that have either the CollOpen or CollClosed class assigned to them. How can I toggle between these two classes on click for each span? .tree ...

jqueryhtmlcss

Ways to incorporate text into a div container

For my assignment, I am working on setting up a menu website and I want to create a floating side div for the order summary. If you need a visual reference, you can check out this Figma design: Just to clarify, this is my first time dealing with coding s ...

javascripthtmlcssbootstrap-4

What is the best way to position a div at the center with a set width and fixed positioning?

I'm currently working on coding and attempting to center a div horizontally in the middle of the page. The div is empty at the moment, just a plain white rectangle with specific dimensions. Here's my code snippet: #wrapper{ width:500px; height:1 ...

csshtmlalignmentcss-positioncenter

Leveraging the css child selector within Ruby's Selenium-Webdriver to locate multiple elements

I prefer to minimize the usage of XPath in webdriver when locating elements, but still want the ability to access child elements from previously identified ones. For example: Consider the following HTML structure: <div id="myelement"> <table ...

cssrubyseleniumwebdriver

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Looking to refine your search in materialize css/bootstrap when utilizing cards?

I recently embarked on a project to create an HTML page utilizing Materialize CSS and Bootstrap. My goal was to incorporate cards representing YouTube videos, along with a search bar that could filter through the cards and display the relevant one. However ...

javascripthtmlcssbootstrap-4materialize

Angular Material Spinner with Custom Image Icons - (mat-spinner)

I have successfully implemented the mat-spinner in my project with configurable changes like color and mode of spinning. However, I am now looking to add an image icon, specifically the logo of a brand or company, inside the spinner. How can I achieve this ...

cssangularangular-material2

The functionality of the Bootstrap navbar-fixed-top seems to be malfunctioning

I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here. Upon examining the example linked above, it appears that the content of the page begins below t ...

csstwitter-bootstrap

Creating a dynamic height footer in CSS that remains pinned to the bottom of the webpage

When the content on a page is limited, around 300 pixels or so, the footer tends to appear in the center of the page when viewed at a resolution of 1024. Is there a way to ensure that my footer always stays at the bottom of the page without having to know ...

htmlcssfootersticky-footer