I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries?
When I attempt to insert the background image into the grid, it ends up being too big for the grid's size in html.
.warper{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:100px 600px 400px 80px;If you plan to utilize the object-fit property, make sure to specify the height and width of the image.
Alternatively, you can opt for using the background property. Below is an example employing the background-size attribute.
.warper{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:100px 600px 400px 80px;
}
.header{grid-column-start:1;
grid-column-end:3}
.jumbo{grid-column-start:1;
grid-column-end:3}
.cards{grid-column-start:1;
grid-column-end:3}
.footer{grid-column-start:1;
grid-column-end:3}
.header{
display:grid;
grid-template-columns:100px 1fr 1fr;
}
.logo{height:80px;
width:80px}
ul {
list-style-type: none;
}
a{text-decoration:none}
li{ display: inline-block;
margin:10px
}
.links {display: flex;
justify-content: center;}
.jumbo{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 500px;background:url(https://dummyimage.com/600x400/000/fff) no-repeat;background-size:100%;background-position:center center;
}
.cover{object-fit: cover;
width: 100%;}
<body>
<div class="warper">
<div class="header">
<div class="navbar">
<img class="logo" src="https://dummyimage.com/600x400/000/fff"></div>
<div class="logogrid">
<h2>TechJuice</h2></div>
<div class="links">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</div>
<div class="jumbo"><!--<img class="cover" src="https://dummyimage.com/600x400/000/fff">--></div>
<div class="cards">cards</div>
<div class="footer">footer</div>
</div>
</body>To decrease the dimensions of the photo within the Image tag and experiment with
<img class="thumbnail" src="photo-1478358161113-b0e11994a36b.jpg" width="10px" height="10px">
You have the flexibility to modify the size as needed
I would like the dropdown menu items to be clickable. For example: Menu item: Services Sub items: - branding } These already have working links - marketing } However, when I try to replace '#' with a link for Services, it d ...
As a beginner, I am exploring web scraping examples from Automate the Boring Stuff. My goal is to create a Python script that automates downloading images from PHD Comics using the following steps: Identify the image link in the HTML and download it. ...
I've been facing an issue where I need my users to access a specific PDF file from a link on my website. Currently, the PDF opens in a separate tab next to my site, but ideally, I would like it to be forced to open in Adobe Reader directly. Is this ac ...
Is there a way to style the border of a TextField only when it has text input? I am currently using the outlined version of the TextField, which displays placeholder text when empty. <TextField variant="outlined" /> So far, I have managed ...
search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...
I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...
Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...
Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&params=bbr_standings_conf:E,bbr_standings_css:1&"></sc ...
Is there a way to make the query run whenever a selection is made from the listbox? if(isset($_POST['select'])){ $newselection=$_POST['select']; $query = "SELECT count(*) FROM listings where description=" . $newselection. ""; $r ...
I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...
I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...
While this code functions correctly in Firefox, it fails to work in IE8. <a class="sub"> <input type="submit" a="" none;<="" display:=""> </a> Although the button appears on the page, it is not clickable in IE8. Can you help explain ...
I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle. While I found some solutions that worked for shapes like ...
I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...
I'm currently working on a basic program that involves the user inputting a number, which is then processed to generate a series of random similar numbers. After this step, the program prompts the user to select the correct variable, which will be va ...
I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...
In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...
I am completely new to Vue and NuxtJs. My goal is to create a webcam feature using NuxtJs, but I have encountered some challenges. <template> <div class="photobooth"> <div class="controls"> <button @click="takePhoto">Ta ...
In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...
On my website, I track Google Analytics by adding the tracking code to the header. The standard implementation of GA tracking is as follows: ga('create', 'UA-483951-1', 'auto'); ga('send', 'page ...