logo
down
shadow

How to achieve a left and right background split leaving middle div visible?


How to achieve a left and right background split leaving middle div visible?

By : maheshwar44
Date : November 17 2020, 11:55 AM
seems to work fine One way is to use :after and :before to create elements with the color you want
code :
#header-Container:before,
#header-Container:after{
    content:'';
    position:absolute;
    z-index:-1;
    width:50%;
    top:0;
    bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}
#header-Container { position: relative; height: 190px;
    background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
    background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}


Share : facebook icon twitter icon
table background issue (left, right and middle as images)

table background issue (left, right and middle as images)


By : Tanveer Ahmed
Date : March 29 2020, 07:55 AM
seems to work fine You can only apply one background image to a table.
If you apply the left and right classes to the respective tags it will work
CSS columns: left/right split, middle content stacked

CSS columns: left/right split, middle content stacked


By : haver
Date : March 29 2020, 07:55 AM
hope this fix your issue Add a wrapper element for image div 2 and 3, make that and divs 1 and 4 floats and give div 3 line-height: 0 to avoid a gap between 2 and 3:
http://codepen.io/anon/pen/gLdOyY
Setting background image to div in css leaving an offset in left and right

Setting background image to div in css leaving an offset in left and right


By : Rajintha
Date : March 29 2020, 07:55 AM
Hope that helps You could use background-clip: content-box; in combination with a 5px padding left and right.
This would give you the following code:
code :
.submenuButton{
    padding: 0 5px;
    background-image:url(images/but-up-center.png);
    background-repeat:repeat-x;
    background-size: cover;
    background-clip: content-box;
}
Left and right alignment leaving space in the middle inside StackPanel

Left and right alignment leaving space in the middle inside StackPanel


By : user7068672
Date : March 29 2020, 07:55 AM
I hope this helps . Use a DockPanel. You'll want to stretch it instead of aligning it to the left.
code :
<DockPanel 
    HorizontalAlignment="Stretch" 
    >
    <TextBox 
        DockPanel.Dock="Left"
        materialDesign:HintAssist.Hint="Filtrar por patente" 
        Width="auto" 
        Margin="5" 
        Text="{Binding Filtro, UpdateSourceTrigger=PropertyChanged}" 
        HorizontalAlignment="Left"
        />
    <Button 
        DockPanel.Dock="Right"
        Width="120" 
        Style="{DynamicResource MaterialDesignRaisedButton}" 
        Margin="5" 
        HorizontalAlignment="Right" 
        Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
        >Volver</Button>
</DockPanel>
How do I lower the background-image opacity while leaving the text 100% visible?

How do I lower the background-image opacity while leaving the text 100% visible?


By : Misha
Date : March 29 2020, 07:55 AM
With these it helps The background img of the header should be translucent and the text should be fully visible. , You can use this code
code :
       body {
            margin: 0;
            padding: 0;
        }   
        .banner {
          width: 100%;
        }
        .bannerimage {
            width: 100%;
            height: 500px;
            display: block;
            position: relative;
            background: rgba(0,0,0,0.7);
        }
        .bannerimage::after {
            content: "";
            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            position: relative;
            opacity: 0.4;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;   
        }
        .bannertext {
          color: 111;
          position: relative;
          text-align: right;
        }
        .bannertext h1 {
          margin-top: 0px;
          color: #fff;
        }
        .bannertext h2 {
          color: #fff;
        }
        .bannertext a {
          color: #fff;
        }
    <div class="banner">
        <div class="bannerimage">
            <div class="bannertext">
                <h1>Welcome to my Portfolio</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
                <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
            </div>
        </div>
    </div>
Related Posts Related Posts :
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • Avoid outline of button when clicked
  • How to add a repeating png image in the background of a webpage using CSS?
  • Heading text displaying at the center instead of displaying in the statring line in asp.net application
  • Div fixation with his mother
  • Sentence is not taking /n
  • Wordpress mobile devices logo resize
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org