This is an alignment of the background image ('relative') to the right side

I am facing an issue with the header section of my website. The background-image is styled using the following CSS:

.header {
    position: relative;
    min-height: 436px;
    background: url("../img/holland-canal.jpg") no-repeat;
    background-size: cover;
}

Currently, when resizing the window to lower resolutions, the image gets aligned to the left causing the right part of the picture (which includes a bridge) to get cut off. I want the bridge on the right side of the image to be visible at all times.

Is there a way to adjust the positioning of the background-image so that it always aligns to the right? This would mean cutting off the left part of the image when resizing to a smaller window.

cssresponsive-design

Answer №1

Don't forget to include the following in your CSS file:

.header{
    background-position:right;
}

This code will apply the background image to any div with the header class.

Result:

For more information, refer to this

Answer №2

Include the background-position property in your CSS.

.header {
    position: relative;
    min-height: 436px;
    background: url("../img/holland-canal.jpg") no-repeat;
    background-size: cover;
    background-position: right;
}

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

Are there any user interface frameworks available that can replicate the aesthetic of a Mac application?

I've been searching high and low but I haven't come across any answers yet. It caught my attention that the wunderlist mac app was developed using HTML/CSS/JS, but I'm curious if they incorporated a pre-existing UI JavaScript framework into ...

javascripthtmlcssuser-interfacedesktop

Issue with the alignment of a sidebar on a website's html page

Last week, I embarked on the journey to learn HTML and CSS. To put my skills to the test, I decided to recreate an old web page using what I have learned so far. The specific page I am trying to emulate can be found here: However, I am currently facing so ...

htmlcsswebweb-deployment

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

javascripthtmljquerycss

CSS media query to center the logo on mobile screens

As someone new to CSS and media queries, I'm reaching out for help from the experts. My challenge involves positioning a mat-toolbar with a menu button and app logo. The HTML code in question is as follows: <div class="toolbar"> <mat-too ...

htmlcssresponsive-designmedia-queries

Set a variable to a specific cell within a table

I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...

javascripthtmlcss

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

javascriptcssreactjsreact-select

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

jquerycss

Tips for shifting nested div containers to the left as the content expands

I have a div containing a dropdown menu, label, and button as shown below: <div class="container "> <div id="User"> <div id="BtnUser"> <div id="dropMe"> <div class="dropdown"> <a onclick="User ...

jqueryhtmlcss

Transferring items between containers with stylish animations in AngularJS

Two of my divs have different contents, with one initially empty and the other filled with items. By clicking on an item in the first list, I want to transfer it over to the second list through a visual animation that implies movement from right to left. W ...

cssangularjscss-animationsangularjs-animation

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

cssangular

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

javascriptjqueryhtmlcssparallax

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

htmlcsstwitter-bootstrap

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

javascriptjqueryhtmlcss

Is it necessary for each React component to have its own individual stylesheet?

Looking for some advice on React as a newbie here. I'm wondering whether each React component should have its own stylesheet. For instance, if I have my main App component that gets rendered to the browser, is it sufficient to include a CSS file the ...

javascriptcssreactjs

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

Looking for a way to display text at its maximum size without any wrapping or overflowing the screen? I attempted using @media and adjusting font-size, but things got too complex. My goal is to have the text on example.com displayed at the largest possible ...

htmlcssmaxfont-size

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pixels based only on my browser). ...

htmlcsscss-shapes

`When utilizing $routeParams, the CSS fails to load`

Whenever I use parameters in ngRoute and go directly to the URL (without clicking a link on the site), the CSS fails to load. All my routes are functioning properly except for /chef/:id. I utilized yeoman's angular generator, and I am running everythi ...

javascriptcssangularjsangularjs-ng-route

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

htmlcsssvg

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

htmlcssangularangular-material