How can we improve the resizing of images for smaller screens?

Don't let the title fool you.

Check out this code:

#headerimg {
background: url('http://artotek.fi/css/images/artoteklogo.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
border-bottom: solid #696969 2px ;
background-size:  200px 250px;
display: block;
width: 100%;
-webkit-box-shadow: inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
-moz-box-shadow:    inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
box-shadow:         inset 0px -10px 15px 3px rgba(76, 76, 94, 0.9);
height: 300px;
}

This code is meant to keep the header image in place, hiding behind the content when scrolled.

Take a look at these images:


16" laptop ^


24" desktop (possibly shown correctly on this site) ^

The goal is for the image to always stay within the header regardless of screen size (attempted using background-size: cover;).

Defining position in pixels or percentages hasn't worked effectively.

How can I ensure the image stays inside the div even when scrolling?

Fiddle

Live demo

htmlcss

Answer №1

Check out the Fiddle example

To make changes to the CSS, do the following:

#headerimg {
background: url('http://artotek.fi/css/images/artoteklogo.gif');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50px;/* centered at 50 pixels from top */
border-bottom: solid #696969 2px ;
/*background-size:  200px 250px;*/ /* this line is removed */
display: block;
width: 100%;
-webkit-box-shadow: inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
-moz-box-shadow:    inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
box-shadow:         inset 0px -10px 15px 3px rgba(76, 76, 94, 0.9);
height: 300px;
}

In your JavaScript code, add the following lines:

var IMAGEWIDTH = 300;// WIDTH OF THE IMAGE
var IMAGEHEIGHT = 521;// HEIGHT OF THE IMAGE
var headerimg = jQuery("#headerimg");
headerimg.css({"background-size":Math.round(Math.min(headerimg.height(),IMAGEHEIGHT)*0.5)+"px "+Math.round(Math.min(headerimg.width(),IMAGEWIDTH)*0.5)+"px"});

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

Ways to align images of the same size in a gallery using the margin: auto property

I have an image gallery within a div element named "container" with a specified width:70%. I need the images to be justified with auto margins. This is the HTML code I am using: (There are 4 images in total) <div class="container"> < ...

javascripthtmlcss

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...

csslayoutmultiple-columns

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

htmlcss

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal? Below is the HTML code: ht ...

javascripthtmlcsshtml-table

The Material UI - makeStyles function is having difficulties generating the intended styles

After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned. For example, consider the following component: import React, { Component } fro ...

cssreactjsmaterial-ui

Tips for replicating input boxes in a while loop

https://i.sstatic.net/iuNIl.png HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="coun ...

javascriptphpjqueryhtml

I have encountered an issue with my rows breaking improperly when viewing them in a PDF format, particularly when I include a minus

Whenever I try to view my HTML page in PDF form, I encounter an issue. The problem arises when the numerical values are too large, causing a line break between the minus sign and the values. Here is an example of the HTML page which appears perfectly: ent ...

javascriptpythonhtmlpdfwkhtmltopdf

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

I am in the process of developing a chat application and my goal is to achieve a smooth scrolling animation that automatically moves the page down to the bottom of the div when dynamic messages are loaded. <ul id="messages"> <li ...

javascripthtmlanimationscrollnative

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

javascriptjqueryhtmlcss

Transmit a JSON object while simultaneously receiving the corresponding response

As part of a school project, I need to work with JSON. The server will process the file and send back a response in JSON format. This entire exchange needs to be done using JavaScript. I recently learned about the XMLHttpRequest object, but I'm still ...

javascripthtmljson

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

Invoking a function using an identifier for modification

I am currently developing a solution, and here is my progress so far: http://jsfiddle.net/k5rh3du0/ My goal is to invoke a function using both the onLoad and onerror attributes with an image. <img src="http://www.etreeblog.com/favicon.ic0" alt="status ...

javascripthtml

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

phphtmlcss

Varying levels of scaling on iPhone and iPad

I am currently working on a website project for my friend's brother and everything is running smoothly (for the most part). The layout of the site is designed with a centered container, leaving approximately 15-20% space from the left side. However, ...

phpiphonecssipad

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...

javascriptjquerycsssassbootstrap-5

Exploration of Non-height Divs

Repeatedly encountering the same issue - a fluid div with floated elements lacking a background due to having "no height." I've experimented with various solutions such as :after selectors, , and artificially setting a height, but none are particularl ...

htmlcsscss-float

How to extract text from outside a tag using Selenium in Python3 with Chrome?

I am having trouble extracting text from outside of a tag. Currently, I am working with Python3.7 and I have experimented with both Selenium and BeautifulSoup4. Below is the HTML snippet I am dealing with: <br> <span class="label">Max. Allo ...

htmlpython-3.xselenium

CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...

csshtml

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml