Linear Gradient is repeating itself on body tag

2019-08-27 03:38发布

站内文章 / HTML/CSS
7 0 0

问题:

when I use a linear gradient on my body tag is is repeating itself even though I have set it no-repeat. As shown in below image:

Question How to stop the linear gradient from repeating in tag background?

CSS

html, body {
    height: 100% !important;
}

body {
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header {
    background: #FFFFFF;
    width: 100%;
    padding: 2em;
}

.wrapper {
    background: #F0F0F0;
    min-height: 600px;
    border-radius: 0.5em;
}

@media (max-width: 968px) {
    .text-mobile {
        text-align: center !important;
    }
}

.card {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
    border-radius: 3px;
    background: #fff;
}

.card-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #DEDEDE;
}

.bg-blue {
    background: #161e2c;

}

.nav-link {
    color: #fff !important;
}

@media (min-width: 768px) {
    .navbar-nav .nav-item {
        float: left;
        position: relative;
    }

    .navbar-nav .nav-item.active:after {
        border-bottom: 5px solid #0087e0;
        bottom: -8px;
        content: " ";
        left: 0;
        position: absolute;
        right: 0;
    }
}

.footer {
    border-top: 2px solid #0087e0;
    margin-top: 3em;
    background: #161e2c;
    width: 100%;
    padding: 2em;
    color: #fff !important;
}

.footer h3 {
    font-size: 18px;
    font-weight: bolder;
}

.footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer hr{
   border: 1px solid #0087e0;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <title><?php echo $title;?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bootstrap/css/bootstrap.css');?>">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.min.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.theme.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.structure.css');?>">    
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.2.1.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/popper.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/plugins/bootstrap/js/bootstrap.js');?>"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left mb-2 text-mobile">
                <h3><?php echo $logo;?></h3>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-right mb-2 text-mobile">
                <a href="<?php echo base_url('admin');?>" role="button" class="btn btn-dark">Admin Login</a>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg bg-blue mb-3">
<div class="container">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fa fa-bars text-white" aria-hidden="true"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

            <li class="nav-item <?php echo $active_home;?>">
            <a class="nav-link" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item <?php echo $active_about;?>">
            <a class="nav-link" href="<?php echo base_url('about');?>">About</a>
            </li>

            <li class="nav-item <?php echo $active_contact;?>">
            <a class="nav-link" href="<?php echo base_url('contact');?>">Contact</a>
            </li>

            <li class="nav-item <?php echo $active_events;?>">
            <a class="nav-link" href="<?php echo base_url('events');?>">Events</a>
            </li>           

            <li class="nav-item <?php echo $active_gallery;?>">
            <a class="nav-link" href="<?php echo base_url('gallery');?>">Gallery</a>
            </li>   

        </ul>
        <form class="form-inline my-2 my-lg-0">
            <?php echo form_input('search_events', '', array('class' => 'form-control mr-sm-2', 'placeholder' => 'Search For Events'));?>
            <button id="search_events" class="btn btn-outline-info my-2 my-sm-0" type="button">Search Events</button>
        </form>
    </div>
</div>
</nav>

<div class="container">
    <div class="wrapper p-3">
        <div class="row">
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-2 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title"><h3 style="font-size: 16px;">Up And Coming Events For </h3></div>
                        <ul class="list-unstyled event-home">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="advert">
                                <img data-src="holder.js/100px180" class="img-thumbnail">
                            </div>
                        </div>
                    </div>
                </div>
            </div>          
        </div>
        <div class="row">
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-3 mb-3">
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="advert">
                                <img data-src="holder.js/100px180" class="img-thumbnail">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3 mt-3">
                <img data-src="holder.js/100px180?theme=sky" class="img-thumbnail">
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
            <h3>Information</h3>
            <hr>
            <ul class="list-unstyled">
                <li><a href="">Information</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">Subscribe to News Letter</a></li>
            </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
            <h3>Site</h3>
            <hr>
            <ul class="list-unstyled">
                <li><a href="">Events</a></li>
                <li><a href="">Sitemap</a></li>
                <li><a href="">Location</a></li>
                <li><a href="">Club Fee's</a></li>
            </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">

        </div>
    </div>
    </div>
</div>
</body>
</html>

update

I tried this css below but it makes the linear gradient go half page only:

html {
    height: 100%;

}

body {
    height: 100%;
    margin: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c);
    background: -moz-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -ms-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -o-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background:  linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
}

回答1:

It seems you are facing background propagation from body to html so you may try to be sure that body is at least taking the height of full screen by adding this code:

body {
  min-height: 100vh;
}



回答2:

html, body {
    min-height: 100% !important;
    max-width: auto;
    background-size: cover;
}

body {
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header {
    background: #FFFFFF;
    width: 100%;
    padding: 2em;
}

.wrapper {
    background: #F0F0F0;
    min-height: 600px;
    border-radius: 0.5em;
}

@media (max-width: 968px) {
    .text-mobile {
        text-align: center !important;
    }
}

.card {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
    border-radius: 3px;
    background: #fff;
}

.card-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #DEDEDE;
}

.bg-blue {
    background: #161e2c;

}

.nav-link {
    color: #fff !important;
}

@media (min-width: 768px) {
    .navbar-nav .nav-item {
        float: left;
        position: relative;
    }

    .navbar-nav .nav-item.active:after {
        border-bottom: 5px solid #0087e0;
        bottom: -8px;
        content: " ";
        left: 0;
        position: absolute;
        right: 0;
    }
}

.footer {
    border-top: 2px solid #0087e0;
    margin-top: 3em;
    background: #161e2c;
    width: 100%;
    padding: 2em;
    color: #fff !important;
}

.footer h3 {
    font-size: 18px;
    font-weight: bolder;
}

.footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer hr{
   border: 1px solid #0087e0;
}

Tried this one out and it worked.



回答3:

Working now I changed on body css background to background-image

html, body {
    min-height: 100%;
    margin:0;
}

body {
    background-image: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c);
    background-image: -moz-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -ms-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -o-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image:  linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
}



标签： css codeigniter
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~