Creating a responsive CSS background image

I am using an image as a background for a class on the left side with a white background. The width of the class is 1368px and the image size is 392px by 600px. I want to fix this image on the left side of the class, making it responsive. Even though I have set the image to be on the left side, it does not display correctly on a responsive page, especially on screens less than 700px in size. How can I solve this issue? Please assist me. Thank you.

.about-middle { 
    width: 100%;
    margin: 0 auto; 
    max-width: 1368px; 
    background: url(../images/right-side.jpg) left #fff; 
    overflow: auto; 
    max-height: 603px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover;  
    -o-background-size: cover;
    background-size: cover;
}

This is the code I am using

jqueryhtmlcss

Answer №1

Check out the JS Fiddle below for your request:

JSFIDDLE DEMO

Custom Styles : 

.main {
   padding:50px 0; 
   position:absolute; 
   top:0; 
   bottom:0; 
   left:0; 
   right:0;
   background-color : blue;
   color : white;    
}
.inner {
    width : 30%;
    float:right;
    height:30%;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}
.fixedpos {
    width : 200px;
    float:left;
    height:200px;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}

HTML Code :

<div class="main">
    main div
    <br><br><br>
    <div class="inner">
        responsive
    </div>
    <div class="fixedpos">
        fixed position
    </div>    
</div>

Answer №2

Hello there! To customize your background, make sure to include the following code: 

background: url(../images/right-side.jpg) no-repeat scroll left center / 81% 100% rgba(0, 0, 0, 0)
. Also, don't forget to adjust the value of x(81%) based on your screen size.

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

Utilizing JavascriptExecutor in Selenium Webdriver to start playing a video

Is it possible to trigger the play function in a page's JavaScript jQuery code using JavascriptExecutor? Below is an example of code extracted from a website: <script type="text/javascript"> jQuery(document).ready(function($) { $('#wp_mep ...

javajavascriptjqueryseleniumwebdriver

Unable to save a URL link in MySQL database using JSON and PHP

I am seeking some insightful advice regarding my college assignment. This time around, I have to create yearbooks using Phonegap and it's my first experience working with AJAX, JSON, and JQuery Mobile. Instead of uploading an image directly into the ...

javascriptphpjquerymysqljson

saving data in an array using JavaScript

I have a requirement to store values into an array in HTML that are generated by a random number generator in Python as {{player.a1s1}}. I have successfully handled this part. Essentially, every time the button "mm1a" is clicked, a new button will be displ ...

javascriptjqueryarrays

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

Tips for incorporating a simple jQuery table

Is there a way to incorporate a simple table with 2 columns and 10 rows on a specific section of a webpage? The table will consist of 10 dynamic entries that are refreshed manually from the back-end DB. The second column of each entry will contain a bit.ly ...

jqueryhtml

What is the best way to position divs on opposite ends around another div?

I have experimented with this scenario so far, http://jsfiddle.net/BXSJe/4/ My goal is to position two divs on the left and right sides within another div, using float:left and float:right resulted in them appearing on separate lines. What I envision is ...

htmlcss

Checkbox for selecting all or none inside column filters in a jQuery datatable

Within a jQuery datatable, I am facing an issue with multi-select filters in a checkbox column. Each filter has a 'Select All / None' checkbox at the top. While I can select all checkboxes within a specific container, the problem arises when the ...

jqueryfilterdatatables

What is the method for obtaining the translate property from a group?

I have multiple SVG groups, each containing a variety of child elements. When a click event occurs on a group, I want to move all groups and their children. I need to access the translate properties of the clicked group so I can adjust the others accordin ...

javascriptjquerysvgd3.js

Automatically populate form fields with data from the clicked row in the HTML table when using JSP

Attempting to populate form fields using jQuery or JavaScript with row elements selected by clicking on the row. Tried a solution from Stack Overflow that didn't work as expected. I'm new to this, so please bear with me. (http://jsbin.com/rotuni/ ...

javascriptjqueryjsp

Which JavaScript framework tackles the challenges of managing asynchronous flow, callbacks, and closures?

I have a strong aversion to JavaScript. I find it to be quite messy and disorganized as a language. However, I recognize that my lack of proficiency in coding with it may contribute to this perception. These past few days have been incredibly frustrating ...

javascriptjquerymongodbtwitter-bootstrapflask

Using JQuery and PHP to make an Ajax request and handle JSON response

I'm attempting to complete a straightforward exercise: The task involves entering two numbers in separate inputs, clicking a button, and seeing the result appear in a third input. sum.html: <html> <head> <title>Sum</tit ...

phpjqueryhtmlajaxjson

What methods can be used to incorporate jQuery fadeIn and fadeOut into mouse event functions?

Currently, I am utilizing jQuery to switch images on mouse events (specifically hover), but I'm facing difficulty in implementing a smooth transition effect using fadeIn and fadeOut for the function below. var sourceIn = function () { ...

jqueryfadeinfadeoutmouseentermouseleave

Maintaining advanced multiple search criteria in jqgrid after grid reload - how can it be achieved?

I have a jqgrid that automatically reloads itself at regular intervals and includes a multiple search feature. Everything is functioning well, except for the fact that when the grid reloads, any previous filtering or searching criteria is lost, causing all ...

jqueryjqgrid

Searching and indexing HTML content using Solrj in Java

I have knowledge on how to index a downloaded HTML page using the following code: ContentStreamUpdateRequest up = new ContentStreamUpdateRequest("/update/extract"); up.addFile(new File(fileName), solrId); up.setParam("literal.id", solrId); up ...

javahtmlsolrsolrj

Issue detected in highstock chart. The tooltip is displaying undefined data

I'm working on creating a highstock chart that displays timestamps on the x-axis and numbers on the y-axis. Additionally, I have some extra data in the array that I want to show in the tooltip. Here's a glimpse of the data array: data=[ { "ID": ...

jqueryhighcharts

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

The Typeahead function encountered an error: it seems that the toLowerCase method is not

Good day. Can you please review my script below? Here is my JavaScript code: $(document).ready(function(){ $("#outlet").typeahead({ source: function(query, process) { $.ajax({ url: '<?=base_url() ...

jqueryajaxtwitter-bootstrapcodeigniter-3

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

adjusting the spacing between lines for a specific li element

I am seeking to vertically align the phone number and email address with the little icons next to them. When I try to adjust the line-height, it affects all the li's in that section. I believe this is because they are inline elements. Here is the webs ...

htmlcss

Guide to verifying a field's value in a database

My web application requires three inputs from the user: UserName, FirstName, and Email. The goal is to verify if the entered username exists in the database and if so, validate the corresponding Firstname and email. If all three values are correct, a succ ...

phphtmldatabase