Creating a Large Image with Boostrap - Enhancing Position and Responsiveness

How can I make an image float to the right of the page, resize in Large and Medium screens, and vanish in Small and Xtra Small screens?

I know how to hide the image using hidden-sm and hidden-xs in bootstrap, but I'm struggling to get the large image to float to the right of the page like the non-responsive picture attached.

Do I need to use Width: % to achieve this effect? I've tried that method but it doesn't seem to work well in terms of responsiveness.

Check out the non-responsive screenshot here

Here's the HTML for the picture:

<!-- PICTURE -->
<div class="container-fluid">
    <div class="row">
        <div class="col-offset-md-9 col-md-3 hidden-sm hidden-xs">
        <div class="BackgroundImage center-block img-responsive"><img src="Pictures/Profile.png" alt="Background Image"></div>
        </div>
    </div>
</div>

And here's the simple CSS code I've been working with:

/* Background Image/Neil Photo */
.BackgroundImage {
    width: 190px;
}

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    display: fixed;
}

Answer №1

To achieve a fixed position, use the "position" property instead of "display" and apply the following styles:

.BackgroundImage {
    //width: 190px;
}

.BackgroundImage img {
    z-index: -1;
    position: fixed;
    top:0;
    right:0;
}

However, there are two other issues on your website that are affecting its responsiveness:

Remove the following:

p { 
    width:110%; 
}

Remove the following:

footer { 
    margin-left:19%; 
}

Answer №2

Opt for the vw measurement over using %

When using vw, the element's size is based on the viewport-width, independent of other factors.

Illustrative example:

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    width: 50vw;
    display: fixed;
}

To anchor the image to the right side of its reference position, include the right: 0 property.

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    width: 50vw;
    right: 0;
    display: fixed;
}

Learn more about this topic: http://www.w3schools.com/css/css_positioning.asp

Ensure compatibility with viewport units by checking: http://caniuse.com/#feat=viewport-units

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

Using the contents of a text file as text in an HTML document

I've come up with a clever time-saving trick for my website template project. I want to streamline the process of changing large text files by having a separate plain text document that will automatically transfer its contents to a designated paragrap ...

What could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

Interactive image rotator featuring navigation buttons for next and previous slides

I recently followed a tutorial from W3Schools Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself Here is what I aim to accomplish: https://i.sstatic.net/qH1PQ.png Below is the code sn ...

The bootstrap carousel seems to be malfunctioning and instead displaying as background images

As someone who is new to coding, I have been attempting to create a slider on Bootstrap, but it seems to be displaying more like a background than an actual slider. Here is an excerpt of my HTML code: <body> <div class="navbar navbar-default ...

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

showcasing recommended options in the search bar through the use of javaScript

Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page. During testing, I keep seeing ${resultItem.name}, and when I ...

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

Paths to External Stylesheets

Imagine having a stylesheet body { background-image: url('/images/background.jpg'); } situated in the header section of a nearby document <html> <head> <link rel="StyleSheet" href="http://externalserver/stylesheet.cs ...

ReactJs: difficulty in resetting input field to empty string

I have an application using React v 0.13.1 (Old version). I am struggling to update my input field to "" after retrieving the updated value from the database. Scenario: I am updating the input fields by clicking on the button named "Pull&qu ...

Companimation Woes: CSS3 Animations Not Triggering Unless Loaded

I am currently utilizing Mike Fowler's companimation library for Compass, but unfortunately, I am encountering an issue where my animations are not functioning properly in Firefox (even though they work perfectly in Chrome). The problem arises when el ...

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

Is it feasible to activate a Bootstrap Tooltip from a different element?

I am currently developing a system that enables users to add notes over an image they upload. Presently, I have a note div that, upon clicking, opens a text box for editing. When hovering over this div, I utilize Bootstrap Tooltip to preview the contents o ...

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

Ensure that the elements are properly arranged inside divs that have been stretched

My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths. The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the ...

What is the reason for the overflow occurring in a container of identical size due to this particular element?

I've encountered an issue while trying to create a div with a scrollbar that only appears when the elements within it don't fit the default area. <div style="overflow-y: auto; height: 36px;"> <img src="." width="36" height="36" /> ...

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

Ways to change content within an editable div without altering the current cursor location

In the javascript code below, I am trying to highlight characters after 255 and display them in another div with a different color. $( "#testdiv" ).keyup(function() { if($("#testdiv").text().length>255) { var text = $("#info").text() $("#te ...

Is there a way to automatically resize the images on my navbar as the screen size decreases?

Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...