Screenshot of site screenshot
I am brand new to coding, and am working on a project and added a background image. I am unable to change the background image to make it the full width of the screen. The images are all on my computer so not sure how to show that on stack overflow, so I added a screenshot.
I have also tried to add it as an img element, but then ran into problems with the bootstrap grid system as well as the z-index. This could also be a solution if someone has a tutorial to send on it! I think I'd rather keep it as a background-image because it seems easier to troubleshoot and resize that way.
I have also tried position: absolute; and position: relative; but that didn't seem to change anything.
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143, 25, 154, 1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right: 0;
color: rgb(224, 16, 176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
.accordion-button:not(.collapsed) {
color: rgb(224, 16, 176) !important;
background-color: rgb(254, 183, 238, .8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
}
a {
color: #73C3E8;
}
img {
position: absolute;
}
.backgroundElipse {
position: center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn {
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
<!--title and favicon-->
</head>
<body>
<div class="container">
<div class="col-12">
<!--section1-->
<div class="sectionOne">
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">Raspberry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>