Is it possible to increase the size of the background image on a small

I am facing an issue where the background image on my website becomes enlarged as the screen size decreases. I have searched online for a solution but have been unsuccessful so far. I am working on a WordPress project using the Avada theme. You can view my site here.

My CSS :

 .boost-din-uddannelser {
     background: url('http://arslankhalid.com/manning/wp-content/uploads/2015/11/12345_051.png');
     padding: 30px 22px;
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
}

My HTML :

<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes boost-din-uddannelser" style="margin-top:0px;margin-bottom:20px;"><div class="fusion-column-wrapper"><div class="last-text">
<h3 data-fontsize="28" data-lineheight="28">BOOST DIN<br>
VÆRKTØJSKASSE<br>
SOM COACH ELLER<br>
LEDER</h3>
<p class="mid">Med to nye aften workshops.Få ny viden og værktøjer til at bruge coaching i virksomheder og til at udvikle teams.</p>
<p><a class="med" href="#">Læs mere</a></p>
</div>
<div class="fusion-clearfix"></div></div></div>

On a larger screen, it appears like this https://i.sstatic.net/SPiqV.png

However, on a smaller screen, it looks like https://i.sstatic.net/N7t4Y.png

htmlcssbackground-image

Answer №1

Consider using background-size: contain; instead of background-size: cover;

Cover: Resize the background image to completely cover the background area, potentially cutting off parts that exceed the bounds

Contain: Scale the image so that both width and height fit within the content area, maintaining aspect ratio

Now, how can you create a square div that spans equally in width and height?

width: 28vw;
height: 28vw;

By setting both width and height to 28vw, each div will always be a square with equal sides.

1vw = 1% of viewport width

1vh = 1% of viewport height

To ensure the squares stack vertically when needed, use a media query with

transform: translate(-50%);
margin-left: 50%;

This will responsively center the divs.

Some tweaking may be necessary.:)

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 eliminate the child element(s) from a highlighted text portion

I'm currently struggling to figure out how to manipulate text elements within a span. When a user selects a portion of text in a div, I successfully append a span element. However, if the user selects the same text again, I want to remove the existing ...

javascriptjqueryhtmlcss

The Javascript validation error for radio buttons briefly appears for a moment when it should stay visible

After reviewing about 30 examples and testing them out, I have decided to post my question since none of the examples seem to be working for me. I am not an expert in JavaScript, but I assumed that validating a simple radio button should not be too diffic ...

javascripthtmlcssformsvalidation

Place the second division beneath the first within a single navigation bar that adjusts accordingly to all screen sizes

I am experiencing an issue with the layout of my page that has 2 divs within one nav element. When the screen width is greater than 1024px, everything looks fine. However, when I reduce the width to less than 768px, the two divs merge into one line instead ...

javascripthtmlcss

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

What is the best way to adjust the height of a side-panel to match the dynamic

I'm facing an issue where my side-panel height is not expanding along with the content of the div. While specifying a height of 100% works well for mobile view, I encounter problems in desktop view as the sidebar's height remains fixed. I want th ...

htmlcssbootstrap-4css-position

Add the data attribute value to the DOM element

Using jQuery, I aim to retrieve the values of date-res and date-ref from the HTML elements and then add them to their respective divs. <div id="grid"> <div class="item blue" date-res="8" date-ref="13" data-groups='["all", "letters", "blue", ...

javascriptjqueryhtml

Tips on showcasing a kendo template within a different one

I have a kendo popup template for add/edit functionality. I am looking to display a list of products with checkboxes inside a list-view in that template. I came across this helpful link on Stack Overflow that explains how to create a list-view of checkboxe ...

javascriptangularjshtmlkendo-uikendo-grid

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

Issues arise when attempting to initiate a FastAPI Post Request from an HTML form action located in a separate directory

I'm trying to trigger a FastApi post method from a form submission, but I'm having trouble figuring out how to make it work across different folders. Here is the structure of my project: ├── index.html ├── assets └── backend ...

pythonhtmlformsfastapi

Tips for successfully passing a combined string as an argument in Angular 2 function parameters

Below is the code snippet in question: ... <tr ngFor= "let i = index"> <myCustomElement myName="{{'nameEdit'+i}}"> <button <--I keep encountering the "Got interpolation ({{}}) where expression was exp ...

htmlangular

CSS tip: A workaround for hiding overflow without affecting 3D transforms is to use "overflow: hidden" in a different way

I'm currently working on creating a horizontal section with a parallax effect. My goal is to have an image in the background that scrolls at a different speed than the rest of the page. My challenge lies in containing the parallax element within its ...

css3doverflowparallax

Discovering the dimensions of a div for a mobile browser

I'm in the process of replicating the layout found at using HTML5 and CSS3, but I'm encountering an issue with the height. I've measured the footer's height to be 50px. While it displays fine on desktop browsers, it appears significant ...

htmlmobilecssmobile-browser

Clicking again on the second onclick attribute

I have an image file named image1.png. When the button is clicked for the first time, I want it to change to image2.png. Then, when the button is clicked for a second time, I want it to change to yet another image, image3.png. So far, I've successful ...

javascripthtml

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...

javascriptjquerycssyepnope

Issue with PHP causing Jquery alert to trigger twice rather than once

I am currently working with jQuery and PHP. I have a button labeled "Edit" but whenever I click on it, the alert message pops up twice instead of just once. Below is my HTML code within the PHP tags: <?php $PostComment2='<div class="button1 ...

javascriptphphtmljquery

"Revealing the specific row and column of the selected element in each table when hovering over it

On my webpage, I have set up two tables positioned side by side like this: <!DOCTYPE html> <table> <tr> <td> <table> <tr><td>1</td><td>2& ...

jqueryhtmlcsshtml-tablehover

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

JQuery running into issues with proper appending

I am currently in the process of loading XML data using the JQuery.load function, and so far everything is going smoothly. The XML is successfully being loaded and inserted into the DOM, which is exactly what I intended. However, my next step involves iter ...

javascriptjqueryhtmlxml

Bootstrap does not show submenus on its navigation menus

I am currently designing a menu with Bootstrap, but for some reason, the submenu items are not showing up. https://i.stack.imgur.com/qZqyf.png After carefully reviewing the HTML code multiple times, I am unable to identify any issues. I am now questionin ...

javascripthtmlcsstwitter-bootstrap

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax