logo
down
shadow

How can I add 2 separate backgrounds in html?


How can I add 2 separate backgrounds in html?

By : Xcode_Manolo
Date : October 18 2020, 06:10 AM
I wish this helpful for you I want to make a website where when it loads, there is a full screen image, and when you scroll down it has a white background which includes all of my about and contact information. How can I do it? I made a div called "top-background" which includes the source to the image, and in the css i used , You can do it like below
code :
body {
  margin: 0;
}

.bgone {
    position:absolute;
    width: 100%; 
    height: 100%; 
    background: blue;
    background-image: url('yourimagehere.png');
    background-size: cover;
    color: white;
}

.bgtwo {
  position: absolute;
  width: 100%;
  top: 100%;
  height: 100px;
}
<div class='bgone'>On page load content</div>
<div class='bgtwo'>Scrolled content</div>


Share : facebook icon twitter icon
Tricky CSS situation with centered page and two separate backgrounds on the left and right

Tricky CSS situation with centered page and two separate backgrounds on the left and right


By : Birk Monrad Christen
Date : March 29 2020, 07:55 AM
will be helpful for those in need I've managed to get this done using CSS and JS (using jquery, but you could do similar stuff using pure JS). I set the left/right to simply use different background colours - feel free to use images.
CSS:
code :
body {
    margin: 0px;
}

#full {
    min-width: 960px;
    position: relative;
}

#dleft {
    min-width: 319px;
    background-color: darkGray;
    border-right: solid 3px gray;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px
}

#dright {
    min-width: 638px;
    background-color: lightGray;
    height: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.left-content {
    float: right;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 299px;
    padding: 10px;
    margin-top: 10px;
}

.right-content {
    float: left;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 618px;
    padding: 10px;
    margin-top: 10px;
}
function resizeDivs()
{
    var WIDM = 960;
    var WIDL = 319;
    var WIDR = 638;

    var ww = $(window).width();

    if(ww <= WIDM)
    {
        $('#full').width(WIDM);
        $('#dleft').width(WIDL);
        $('#dright').width(WIDR);
    }
    else
    {
        var pad = (ww - WIDM) / 2;
        $('#full').width(ww);
        $('#dleft').width(WIDL + pad);
        $('#dright').width(WIDR + pad);
    }               
}

$(document).ready(resizeDivs);
$(window).resize(resizeDivs);
<body>
    <div id="full">
        <div id='dleft'>
            <div class="left-content">
                Left Column
            </div>
        </div>
        <div id='dright'>
            <div class="right-content">
                Right Column
            </div>
        </div>
    </div>
</body>
Divs with backgrounds for html/css

Divs with backgrounds for html/css


By : Kavya Ananda
Date : March 29 2020, 07:55 AM
Hope that helps Change your code like this. Because you cannot apply html tag inside css like you where mention in your question.
code :
 <head>
    <style type="text/css">
    #currentpage{
          position: absolute;
          width:auto; /* specify width */
          height:auto; /* specify height */
          left:424px;
          top:134px;
          margin-left:0px;
          margin-top:0px;
          background-image: url(bgsource/contactpage.png);
          background-repeat: no-repeat;
    }
    </style>
    </head>
    <body>
       <div id="currentpage"></div>
    </body>
Set responsive HTML backgrounds

Set responsive HTML backgrounds


By : Viacheslav Luzhansky
Date : March 29 2020, 07:55 AM
I wish this help you You are setting your second background's position with 98%. That means you are setting its position based on 98% from the top. On pages of different heights, the visual position of the background will be slightly different in absolute pixels.
Your footer appears to be about 40px high, so instead of 98%, set the value to calc(100% - 40px).
How to create this 80's backgrounds in CSS and HTML?

How to create this 80's backgrounds in CSS and HTML?


By : alok_nk
Date : March 29 2020, 07:55 AM
it should still fix some issue i want to ask how to create the 80 backgrounds only with html and CSS? , You need a combination of transforms to get this effect, I used:
code :
transform: perspective(400px) rotateX(70deg) scale(2);
body { margin: 0; }

.perspective-container {
  overflow: hidden; /* so we dont get any undesired scrolling in the browser window */
}

.bottom-background {
  background-size: 20px 20px;
  background-image: linear-gradient(to right, green 1px, transparent 1px), linear-gradient(to bottom, green 1px, transparent 1px);
  width: 100%;
  height: 50vh;
  bottom: 0;
  position: absolute;
  
  transform: perspective(400px) rotateX(70deg) scale(2);
}
<div class="perspective-container">
  <div class="bottom-background"></div>
</div>
HTML/CSS Animated Backgrounds

HTML/CSS Animated Backgrounds


By : Error Tv
Date : March 29 2020, 07:55 AM
may help you . My friend thought of this idea for me to try out but I don't even know where to start. It is basically having smoke in the background of a website. Like moving around and what not. Just a simple smokey moving background. Seems possible but I have no idea where to start looking so any help in the right direction would be fantastic! , here one not so complicated
Related Posts Related Posts :
  • How to override the behavior of Input type="file" Browse button?
  • HTML elements physical size
  • Hide empty table (with whitespace) with css
  • <div.main> </div.main> - Syntax
  • How to stop text going under or over picture
  • <picture>: if multiple media queries match, which one has priority?
  • How can i change the width and the height size of the div class "col-sm-9"?
  • css typewriter effect, shows all text then starts the effect
  • How to put a div and nested divs with min height of all body
  • How to ease out a loading screen in Angular?
  • How do I scale specific points while leaving other points alone?
  • Is there a need to install CSS3 plug-ins?
  • I want to style inputs inside a div with html
  • Vue-select drop-down not working properly
  • How to use the euro symbol in PL/SQL code?
  • HTML table with millions of cells ignores cell's fixed dimensions
  • Alternately coloring the virtual rows created by CSS flex
  • Checkbox change event receiving undefined value
  • Layout breaking when title of post breaks to next line or stacks
  • How to rotate an image in all the direction using css
  • Cannot open link in a new tab inside iframe
  • Hyperlinks do not work on left mouse click
  • Bootstrap - NavBar is not collapsing well first element
  • Which input type is this?
  • Steam a live Video using HTML
  • How to style the last Angular component on the page?
  • How to scale an image to its original size by CSS?
  • Can i write typescript with in <Script> tag?
  • Smalltalk Seaside - How do I change the size of a button?
  • Validation of input type number in Angular 6
  • How to prevent VS Code from breaking up long HTML lines into multiple lines?
  • How to adjust the width of react flexbox grid items to allow space between them?
  • WCAG 2.0 redundant links
  • determining width of container based on how many flex items
  • I want to put footer at the bottom of the page
  • Have footer be pushed to the bottom without hovering over info
  • Why does viewbox attribute affect the size of the SVG element?
  • Is there a way to implement proper links using `<a href="/">` with github pages?
  • Changing CSS with the checkbox check
  • Insert React variable as attribute in html tag
  • How to give opacity to parent div in such a way that it does not effect child div?
  • Making 2 lists Side-by-Side
  • Convert XML to HTML Table in XSLT
  • Why am I getting error in *ngIf of angular reactive form
  • How can I make my site open Instagram in-app?
  • How to select h4 heading
  • Aligning flex items vertically
  • How to create images with border radius?
  • html: max function in font-size doesn't work
  • How to make an element sticky?
  • Vertically align html-entity characters in monospace font?
  • Fitting a 'widescreen' image into a square div
  • How to create background with triangle shapes?
  • How can I spread out my flex items to more than the width of a container?
  • Unable to put anchor tag inside HTML code tag
  • Center fit images of any size to parent div
  • Why doesn't my CSS border appear on a span around a button?
  • How to implement light color change of a traffic light with pure css?
  • Make CSS max-width larger than parent
  • How to apply `display:none;` to everything except an `<td class="cc">text</td>`?
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk