Adding a border to my image that extends to the edges of the page

.overlay{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

I have created an overlay background image that covers the entire page. I want the area surrounding the overlay image to be filled with white, but not within the image itself.

This setup is intended to create a frame for a central picture on the screen.

The concept is to have a full-color page behind the background image, but have it appear invisible due to the border or design elements around the image.

htmlcss

Answer №1

.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #{your_color} url(hex-shape.png) no-repeat center;
  z-index:99999;
}

Answer №2

If you have the dimensions of the image handy, here's a straightforward method to center an image in the middle:

HTML:

<div id="container">
    <img id="placekitten" src="http://placekitten.com/g/200/300">
</div>

CSS:

#placekitten {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -100px;
    z-index: 9000;
}
#container {
    height: 500px;
    border: solid black 1px;
}

The trick is to set the margin-top to -1 * height/2 and the margin-left to -1 * width/2. These values need to be adjusted manually for this technique to be effective.

FIDDLE

Answer №3

I'm not quite sure what you're looking for, but I believe this solution might be helpful

Consider using the stretch technique:

.overlay{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

Experiment with adjusting the values for top, left, right, and bottom

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

Clearing HTML Text Input Box When User Presses Enter

Currently, I am working on a lengthy program that is functioning almost flawlessly. However, there is one persistent issue: whenever I hit the Enter key while the text box is clicked, it clears the box and appends the data to the URL as if it were a GET re ...

htmltextboxenter

Are you looking for a stunning vertical gallery with responsive design in Photospace Gallerific? Let's enhance it

Is there a way to make my gallery from http://wordpress.org/extend/plugins/photospace-responsive/ responsive? I want it to change from a vertical layout to horizontal when the browser is scaled down for mobile viewing. Can you advise on how to ensure that ...

csspluginsresponsive-designgalleriffic

jQuery inserts a closing tag before reopening it when applying .before()

I have the following HTML code: <ul> <div> <li>a</li> <li>b</li> <li class="break">c</li> <li>d</li> <li>f</li> ...

jqueryhtmldom-manipulation

Knitting: exporting to HTML file while retaining formatting

Recently discovered the amazing knitr library in R, which looks great when viewed in the viewer. But unfortunately, the style gets lost when saved to an html file. Code library(knitr) library(kableExtra) some.table <- data.frame ( x = rep(1 ...

cssrknitrkablekableextra

Different ways to modify the CSS file of the bx-slider plugin for multiple sliders within a single webpage

Currently in the process of building a website using bx slider. I am looking to incorporate three sliders onto a single page for sliding HTML content. Initially, I added a bx slider to the page and customized it using CSS. I made modifications within jqu ...

javascriptjqueryhtmlcssbxslider

Utilizing jQuery to Extract HTML Data Attributes

Is there a way to access and extract the values stored in the data attributes with jQuery? <div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" > ...

jqueryhtml

Managing the "Accept Cookies" notification using Selenium in JavaScript

As I use Selenium to log in and send messages on a specific website, I am faced with a cookie popup that appears each time. Unfortunately, clicking the accept button to proceed seems to be quite challenging for me. Here is an image of the cookie popup Th ...

javascripthtmlselenium

Eliminate unnecessary scrollbar from fancybox iframe

I am trying to display content in an iframe using Fancybox, but I am encountering an issue. Despite all the content being contained within the iframe, horizontal and vertical scroll bars are appearing. When inspecting the element in Firefox, I noticed th ...

javascripthtmlcssfancybox

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

htmlcsstwitter-bootstrapnavbarnav

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

javascripthtmlnpmminifiedjsfunction.prototype

Parallax scrolling and Swiper slider, a match made in digital design

Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly. I suspect the problem lies in the fixed position of the image within the parallax effect. Attempted to resolve b ...

jquerycssparallaxswiper.js

``Are you looking to create multiple canvases in a loop?

I've managed to get this command working exactly as I wanted: http://jsfiddle.net/m1erickson/64BHx/ However, I didn't anticipate how challenging it would be to turn the drawing into reality here: What I attempted to do is illustrated in this li ...

javascriptjqueryhtmlcanvashtml5-canvas

Discover the CSS auto height value using JavaScript

Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...

javascriptcss

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Ways to decrease font size and insert a line break within a constrained input space?

I am facing an issue where the input box remains static with old numbers when it overflows, and newly typed numbers do not appear at all. <!DOCTYPE html> <html> <body> <input type="text" id="output-area" placehold ...

javascripthtmlcss

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

htmlangularcss

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

htmlcss

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

javascriptjqueryhtmljson